Welcome to
Creative Coders!

CSS Preprocessors

Ed Moore

CSS is Awesome

Single Element

FIRE

CSS SUCKS

Vendor Prefixes

-webkit-whatever: something
-moz-whatever: something
-o-whatever: something
-ms-whatever: something
whatever: 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;
}

Stylus

primaryColor = #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

Sass

Stylus

Nib

Less

Less 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 the new spec.

MozillaCan I Use

Myth

CSS the way it was imagined.

Myth.io

Ed Moore