An Introduction to Sassy CSS

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
An Introduction to Sassy CSS Stewart Curry

Who is This Guy? Web Designer for 15 years or so Table-based layouts & spacer gifs CSS changed all that SCSS is CSS only better woop.ie - iteration, modules, themes, templates

past simple

now complicated

design everywhere

      

SASS MAKES CSS FUN AGAIN www.sass-lang.com Basically, CSS made ﬂexible & awesome by adding in cool features.

TOPICS • What’s Sass/SCSS? • Installing Sass • Variables • Nesting • Mixins • Media Queries • Partials • Inheritance • Gotchas • Links

There Will be Code

“ Sass Style with attitude Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin. www.sass-lang.com

it looks like CSS $blue: #3bbfce; $margin: 16px; .content-navigation { border-color: $blue; color: darken($blue, 9%); } .border { padding: $margin / 2; margin: $margin / 2; border-color: $blue; }

it looks like CSS but • it’s neater • it’s faster to write • it allows for more experimentation • it’s more ﬂexible • it’s more manageable • it’s got variables!

so you can • experiment more • make global changes quickly • make reusable modules • use frameworks more eﬀectively • handle RWD neatly • have less cluttered code

workﬂow css images scripts index.html

workﬂow css images scripts index.html sass

workﬂow css images scripts index.html sass style.scss

workﬂow style.scss ⚙ processor style.css

workﬂow css images scripts index.html sass style.scss style.css

all you do is... • make a .scss file • write to it, just like normal CSS • translate it to a CSS file/folder: • sass --watch style.scss:style.css • sass --watch stylesheets/ ↵ sass:stylesheets/compiled • and any changes you make to your SCSS file(s) will be complied to your CSS file(s).

Y U NO USE LESS.JS?

Install Ruby rubyinstaller.org $ sudo gem install sass $ sass --watch style.scss:style.css

http://incident57.com/codekit/

“ $variables variables allow you to use the same value in multiple places, as well as perform basic maths and functions.

why variables rock Change one variable and you change it everywhere. Save hours of search & replacing. Experiment with small changes in margins & gutters. Reskin with diﬀerent colours...

$variables • begin with a dollar sign $ • assign a value with a colon separator : • end with semi-colon ; $red : #ff0000; $font : "Open Sans", Arial, Sans-Serif; $margin : 16px; $column : 40px; $type : 1em;

$variables • use instead of a value h1 { color: $primarycolor; font-family: $mainfont; font-size: $basetypesize; margin: 0 0 $margin 0; } SCSS h1 { color: red; font-family: "Open Sans", Arial, Sans-Serif; font-size: 1em; margin: 0 0 16px 0; } CSS $primarycolor : red $mainfont : “Open Sans... $basetypesize : 1em $margin : 16px

operations • maths: + - / * • color: darken, lighten, saturation, opacity • http://sass-lang.com/docs/yardoc/Sass/ Script/Functions.html

operations .island { background: darken($primarycolor,10%); width: $column*4; margin: $margin*2 $margin/2 $margin+20 $margin; padding: $margin*0.25; } SCSS .island { background: #cc0000; width: 160px; margin: 32px 8px 36px 16px; padding: 4px; } CSS $primarycolor : red $column : 40px $margin : 16px

escaping • wrap with #{ } • useful for paths p { font: #{$basetypesize}/#{$basetypesize*1.5} $mainfont; } SCSS p { font: 1em/1.5em "Open Sans", Arial, Sans-Serif; } CSS $basetypesize : 1em

negatives • minus symbols • -64px -32px 0 16px • top: -96px; right , left are 0; bottom is 16px .moveup { margin:-$margin*4 -$margin*2 0 $margin; } SCSS .moveup { margin: -96px 0 16px; } CSS $margin : 16px

negatives • wrap in brackets • (-$variable*value) .moveup { margin:(-$margin*4) (-$margin*2) 0 $margin; } SCSS .moveup { margin: -64px -32px 0 16px; } CSS $margin : 16px

“ nesting Sass avoids repetition by nesting selectors within one another. The same thing works with properties. www.sass-lang.com

why nesting rocks Write a hell of a lot less CSS. Avoid repetion. Use indentation to quickly scan and see relationships. Use ampersands for awesomeness.

write html as normal <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact Us</a></li> </ul> </nav> HTML

nest & indent nav { font-family: $mainfont; ul { margin: 0; padding: 0; li { list-style: none; a { background: #222; color: #fff; display: block; float: left; padding: $margin $margin*1.5; text-decoration: none; } } } } SCSS $mainfont : “Open Sans... $margin : 16px

nest & indent nav { font-family: "Open Sans", Arial, Sans-Serif; } nav ul { margin: 0; padding: 0; } nav ul li { list-style: none; } nav ul li a { background: #222; border-right: 1px solid #666; color: #fff; display: block; float: left; padding: 16px 24px; text-decoration: none; } CSS $mainfont : “Open Sans... $margin : 16px

selectors em { font: { family: Georgia, Serif; style: normal; weight: bold; variant: small-caps; } } SCSS em { font-family: Georgia, Serif; font-style: normal; font-weight: bold; font-variant: small-caps; } CSS

& ampersand

& ampersand • pulls the parent selector into the & #fancybox { li a.fancy { &:link { color: $primarycolor; } &:visited { color: darken($primarycolor,20%); } &:hover { color: lighten($primarycolor,10%); } } } SCSS #fancybox li a.fancy:link { color: #993333; } #fancybox li a.fancy:visited { color: #4d1919; } #fancybox li a.fancy:hover { color: #bf4040; } CSS $primarycolor : #993333

ampersand & • prepends before parent selector #fancybox { li a.fancy { &:link { color: $primarycolor; } &:hover { color: lighten($primarycolor,10%); } body#checkout & { border:1px solid $primarycolor; } } } SCSS #fancybox li a.fancy:link { color: #993333; } #fancybox li a.fancy:hover { color: #bf4040; } body#checkout #fancybox li a.fancy { border: 1px solid #993333; } CSS $primarycolor : #993333

ampersand & • use with HTML body classes #browserwars { border: 1px solid red; .ie8 &, .ie9 & { border: 1px solid blue; } .ie10 & { border: 1px solid green; } } SCSS

ampersand & • use with HTML body classes #browserwars { border: 1px solid red; } .ie8 #browserwars, .ie9 #browserwars { border: 1px solid blue; } .ie10 #browserwars { border: 1px solid green; } CSS

ampersand & • use with HTML body classes $size :16px; h1 { font: { family: Arial, sans-serif; size: $size; } .wf-active & { font: { family: "proxima-nova-extra-condensed", Arial, sans-serif; size: $size*1.5; } } } SCSS $size : 16px

ampersand & • use with HTML body classes h1 { font-family: Arial, sans-serif; font-size: 16px; } .wf-active h1 { font-family: "proxima-nova-extra-condensed", Arial, sans-serif; font-size: 24px; } CSS $size : 16px

“ @mixins mixins allow you to re-use whole chunks of CSS, properties or selectors. You can even give them arguments. www.sass-lang.com

why mixins rock Reduce massive chunks of CSS into reusable includes that you can use over and over again.

http://compass-style.org/

@mixin • begin with @mixin • give it a name • add your $variable(s) • give (an) optional default value(s) @mixin roundcorner ($radius: 4px) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; }

@mixin • call it with @include .fancybox { width: 100px; @include roundcorner(10); } SCSS .fancybox { width: 100px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } CSS

image replace @mixin hidetext { text-indent: 100%; white-space: nowrap; overflow: hidden; } .logo { background: url(images/logo.png) no-repeat; @include hidetext; width: 200px; height: 80px; }

boxshadow @mixin boxshadow ($horz, $vert, $blur, $spread, $color) { -webkit-box-shadow: #{$horz}px #{$vert}px #{$blur}px #{$spread}px $color; -moz-box-shadow: #{$horz} px #{$vert}px #{$blur}px #{$spread}px $color; box-shadow: #{$horz}px #{$vert}px #{$blur}px #{$spread}px $color; } @include boxshadow (2,2,2,0,rgba(0,0,0,0.5));

transitions @mixin transanim ($time) { -webkit-transition: all #{$time}s ease-in-out; -moz-transition: all #{$time} s ease-in-out; -o-transition: all #{$time}s ease-in-out; -ms-transition: all #{$time}s ease-in-out; transition: all all #{$time}s ease-in-out; } * { @include transanim(0.5); }

type @mixin type ($size, $lineheight, $marginbottom: 1 1.5 1) { font-size: $grid*$size; font-size: $grid*$size / 16px + rem; line-height: $grid*$lineheight; line-height: $grid*$lineheight / 16px + rem; margin:0 0 $grid*$marginbottom 0; } h1 { @include type (1.75, 2, 1); } $grid : 20px $lineheight : 1em

type h1 { font-size: 35px; font-size: 2.188rem; line-height: 40px; line-height: 2.5rem; margin: 0 0 20px 0; } CSS $grid : 20px $lineheight : 1em

@each $social: twitter facebook linkedin; @mixin social-icons { @each $icon in $social { .social-#{$icon} { background: url("images/#{$icon}.png") no-repeat; } } } .social { @include social-icons; } SCSS

it’s a loop! .social .social-twitter { background: url("images/twitter.png") no-repeat; } .social .social-facebook { background: url("images/facebook.png") no-repeat; } .social .social-linkedin { background: url("images/linkedin.png") no-repeat; } CSS

retina @mixin bgretina ($source, $format ) { background: { image: url("#{$source}.#{$format}"); size: cover; repeat: no-repeat; } @media screen and (-webkit-min-device-pixel-ratio: 2) { background: { image: url("#{$source}@2x.#{$format}"); } } } #responsivetest { width: 400px; height: 400px; @include bgretina(bgimage,png) } SCSS

retina #responsivetest { width: 400px; height: 400px; background-image: url("bgimage.png"); background-size: cover; background-repeat: no-repeat; } @media screen and (-webkit-min-device-pixel-ratio: 2) { #responsivetest { background-image: url("[email protected]"); } } CSS

ampersand & • make it a mixin to reuse @mixin webfonts ($fallback, $shinytype, $size) { font: { family: #{$fallback}; size: $size; } .wf-active & { font: { family: "#{$shinytype}", #{$fallback}; size: $size*1.5; } } } h1 { @include webfonts("Arial, sans-serif", "proxima-nova-extra-condensed", 16px); } SCSS

“ @media @media directives in Sass behave just like they do in plain CSS, with one extra capability: they can be nested in CSS rules. www.sass-lang.com

why media queries rock Make responsive layouts. Associate media queries more closley with the element you are changeing.

@media • begin with @media • write media queries as normal • if it appears within a rule, it will ‘bubble up’ and put the selectors within the rule. • media queries can be nested • combined with the and rule

@media .sidebar { float: right; width: 300px; @media screen and (max-width: 480px) { float: none; width: 100%; } } SCSS .sidebar { float: right; width: 300px; } @media screen and (max-width: 480px) { .sidebar { float: none; width: 100%; } } CSS

#logo #menu #content #leftnav #footer 1 2 3 4 5

@media @mixin boxit ($dir) { display:box; display:-moz-box; display:-webkit-box; box-orient:$dir; -moz-box-orient:$dir; -webkit-box-orient:$dir; } @mixin boxnum($num: 1) { box-ordinal-group: #{$num}; -moz-box-ordinal-group: #{$num}; -webkit-box-ordinal-group: #{$num}; } SCSS

@media @media screen and (max-width: 480px) { #wrapper { width: 100%; @include boxit(vertical); #logo { @include boxnum(2); } #menu { @include boxnum(1); } #content { @include boxnum(3); } #leftnav { @include boxnum(4); } #footer { @include boxnum(5); } } } SCSS

#logo #menu #content #leftnav #footer 1 2 3 4 5 1 2 3 4 5

3.2 coming soon

@media • variables in queries • Sass 3.2 alpha • other cool stuﬀ You can’t use this yet - watch https://github.com/nex3/sass/

@media You can’t use this yet - watch https://github.com/nex3/sass/ @mixin respond-to($media) { @if $media == handhelds { @media only screen and (max-width: 320px) { @content; } } @else if $media == medium-screens { @media only screen and (min-width: 321px) and (max-width: 1024px) { @content; } } @else if $media == wide-screens { @media only screen and (min-width: 1024px) { @content; } } } .profile-pic { float: left; width: 250px; @include respond-to(handhelds) { width: 100% ;} @include respond-to(medium-screens) { width: 125px; } @include respond-to(wide-screens) { float: none; } } SCSS http://thesassway.com/intermediate/responsive-web-design-part-2#the_future_of_media_queries_in_sass

“ _partials partials are snippets of scss that are saved into ﬁles meant to be imported. They begin with an underscore and don’t get compiled.

why partials rock Include ﬁles for CSS. Make your ﬁles more managable by breaking them into discreet external modules.

_partials • ﬁlename starts with an underscore • e.g. “_grid.scss” • import it into your .scss ﬁle • @import "grid"; • save on HTTP requests • better structure

workﬂow _reset.scss _grid.scss _type.scss style.scss ⚙ processor style.css

examples • Separate partials for: • grids, typography, colours, forms, tables • mixins & variables • diﬀerent post types for blogs • adverts • media queries • site sub-sections

“ @extend The @extend directive (tells) Sass that one selector should inherit the styles of another selector. http://nex-3.com/posts/99-selector-inheritance-the-easy-way-introducing-extend

why extend rocks Lets you add styles from one selector to another, as well as its own styles.

@extend • nest @extend .classname; • goes inside another class • don’t have to use multiple classes • association is in CSS not HTML

@extend .error { border: 1px #f00; background: #fdd; } .badError { @extend .error; border-width: 3px; } SCSS .error, .badError { border: 1px #f00; background: #fdd; } .badError { border-width: 3px; } CSS

gotchas! A few things to watch out for when working with SCSS.

/facepalm • make sure you’re running your compiler • make sure it’s not CSS • watch out for escaping #{values} • be aware of inheritance • when you go back to CSS, don’t forget your inheritance

codekit

useful links

learn more • http://sass-lang.com/ • http://www.youtube.com/watch? v=fbVD32w1oTo • https://twitter.com/teamsassdesign • https://twitter.com/scottkellum • http://www.slideshare.net/ginader/sass- compass-and-the-new-tools-open-web- camp-iv

learn more • http://incident57.com/codekit/ • http://compass-style.org/ • http://thesassway.com/projects/sass- twitter-bootstrap • http://foundation.zurb.com/ • http://zengrids.com/ • http://jaredhardy.com/sassy-buttons/

thank you! feedback, comments, links? @irishstu

￼An Introduction to Sassy CSS

￼An Introduction to Sassy CSS

More Decks by Stewart Curry

Other Decks in Design

Featured

Transcript

An Introduction to Sassy CSS

An Introduction to Sassy CSS