Css Preprocessors

Welcome to Creative Coders!

CSS Preprocessors

Ed Moore

twitter: @_edmoore

gplus: +EdMoore

github: eddiemoore

CSS is Awesome

Single Element

FIRE

CSS SUCKS

CSS3 not consistant across browsers

Modularisation sucks

Hard to stay DRY

No Variables*

Vendor Prefixes‐webkit‐whatever: something‐moz‐whatever: something‐o‐whatever: something‐ms‐whatever: somethingwhatever: something

Enter CSS Preprocessors

Any valid CSS file is a valid SASS/LESS/Stylus file

Variables

SASS$primaryColor: #BADA55;

a {  color: $primaryColor;}

LESS@primaryColor: #BADA55;

a {  color: @primaryColor;}

StylusprimaryColor = #BADA55

a  color: primaryColor  

Nesting

.module {  width: 500px;    a {    color: red;  }    ul {    li {      display: inline‐block;      a {        color: pink;      }    }  }}

.module {  width: 500px;}.module a {  color: red;}.module ul li {  display: inline‐block;}.module ul li a {  color: pink;}

Avoid inception

Only go 3 levels deep

BAD#mything .module .something ul li a { ... }

Partials

Break up your styles@import 'base/reset';@import 'base/typography';

@import 'layout/grid';...

Functions

@mixin box‐shadow($top, $left, $blur, $color) {  ‐webkit‐box‐shadow: $top $left $blur $color;  ‐moz‐box‐shadow: $top $left $blur $color;  box‐shadow: $top $left $blur $color;}

div {  @include box‐shadow(2px, 2px, 5px, rgba(0,0,0,0.3));}

div {  ‐webkit‐box‐shadow: 2px 2px 5px rgba(0,0,0,0.3);  ‐moz‐box‐shadow: 2px 2px 5px rgba(0,0,0,0.3);  box‐shadow: 2px 2px 5px rgba(0,0,0,0.3);}

Maths Operations

.col‐1‐2 {  width: (100% / 2);}.col‐1‐3 {  width: (100% / 3);}.col‐2‐3 {  width: (100% / 3) * 2;}

.col‐1‐2 {  width: 50%;}.col‐1‐3 {  width: 33.33333%;}.col‐2‐3 {  width: 66.66667%;}

Extending / Inheritance

.foo {  color: red;}.bar {  @extend .foo;}

.foo, .bar {  color: red;}

Referencing Parent Selectors

a {  color: red;  &;:hover {    color: pink;  }}

a {  color: red;}a:hover {  color: pink;}

a {  color: red;    .module &; {    color: green;  }}

a {  color: red;}.module a {  color: green;}

Colour Functions

button {  background: #000;    &;:hover {    color: lighten(#000, 20%);  }}

button {  background: #000;}button:hover {  background: #333333;}

Loops

$total‐columns: 6;$col‐widths: ();@for $i from 1 through $total‐columns {  @for $j from 1 through $i {    $w: ($j/$i);        @if index($col‐widths, $w) == false {      .col‐#{$j}‐#{$i} {        width: $w * 100%;      }      $col‐widths: append($col‐widths, $w, comma);    }  }}

.col‐1‐1 { width: 100%; }

.col‐1‐2 { width: 50%; }

.col‐1‐3 { width: 33.33333%; }

.col‐2‐3 { width: 66.66667%; }

.col‐1‐4 { width: 25%; }

.col‐3‐4 { width: 75%; }

.col‐1‐5 { width: 20%; }

.col‐2‐5 { width: 40%; }

.col‐3‐5 { width: 60%; }

.col‐4‐5 { width: 80%; }

.col‐1‐6 { width: 16.66667%; }

.col‐5‐6 { width: 83.33333%; }

Utilities

SassCompass

Susy

StylusNib

LessLess Hat

How the *!@$ do I turn all that into CSS?!?

Embrace the command line

Tools

LiveReload

CodeKit (OSX only)

Compass.app

Scout

Prepros

Koala

Less.app (OSX only)

Crunch! (Less)

Future

CSS Variables:root {  ‐‐main‐bg‐color: brown;}

.one {  background‐color: var(‐‐main‐bg‐color);}

Note: The custom property prefix was var- in the earlier spec, but later changed to --. Firefox 31 and above follow thenew spec.

MozillaCan I Use

MythCSS the way it was imagined.

Myth.io

Ed Mooretwitter: @_edmoore

gplus: +EdMoore

github: eddiemoore

slides: http://bit.ly/1gQqRoe