Your browser doesn’t support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

Intro to CSS Preprocessors

Orange County WordPress Web Designers Meetup, December 2013

This presentation is at:

http://davidthemachine.org/ocwpwd_201312/css-pre-proc.html

Who I am

David Arceneaux

More developer than designer; artisan, not artist;

I carry this perspective into my web work

What’s a CSS preprocessor?

A program that takes a more compact CSS-like file, and turns it into full-fledged CSS.

Why use a preprocessor?

DRY - Don’t Repeat Yourself

Reusability - all preprocessors have ways to tie up common CSS operations into smaller pieces

What preprocessors are out there?

LESS http://lesscss.org

SASS http://sass-lang.com

Stylus http://learnboost.github.io/stylus/

What a preprocessor gives you

Examples are in SASS, because that’s what I know best

More compact expression through nesting

a {
  ...
}
a:link {
  ...
}
a:visited {
  ...
}
a:hover {
  ...
}
a:focus {
}
a:active {
  ...
}
a img {
  ...
}

Can be expressed in SCSS as:

a {
  ...
  &:link {
    ...
  }
  &:visited {
    ...
  }
  &:hover {
    ...
  }
  &:focus {
    ...
  }
  &:active {
    ...
  }
  img {
    ...
  }
}

Variables

These give you DRY-ness

$tardis-blue: #003b6f;
$base-font-size: 15px;
$line-height: 1.2 * $base-font-size;
html {
  font-size: $base-font-size;
  line-height: $line-height;
  background-color: complement( $tardis-blue );
}

a {
  &:link {
    color: $tardis-blue;
  }
  &:visited {
    color: desaturate( $tardis-blue, 20% );
  }
  &:hover, &:focus {
    color: lighten( $tardis-blue, 20% );
  }
  &:active {
    color: invert( $tardis-blue );
  }
}

This becomes the following CSS...

html {
  font-size: 15px;
  line-height: 18px;
  background-color: #6f3400; }

a:link {
  color: #003b6f; }
a:visited {
  color: #0b3a64; }
a:hover, a:focus {
  color: #0071d5; }
a:active {
  color: #ffc490; }

Mixing, Extending, Including

Reuse of code is a key benefit of going with a preprocessor.

In this example, I’m loading Compass, a popular SASS library of mixins, along with some of my own pieces:

@import 'normalize';
@import 'sizing';
@import 'compass';

$base-font-size = 1rem;
$lh = 1.2 * $base-font-size;

%clearfix { ... } /* placeholder class */
.branding { ... }

body {
  @include rem( padding, $lh );
  ...
  > header {
    ...
    @extend .branding;
    @include rem( margin, 0 $lh );
  }
  > footer {
    ...
    @extend %clearfix;
  }
}

“That’s fine, I guess, but can I use it without using the command line?“

These utilities were born in the command-line, coder-driven world, but there are ways to use these without having to venture to the command line.

These packages streamline front-end development work, however I do not use them. I can only pass on what their selling points are:

Try before you install

Various online sandbox sites out there, like

More reading & eye candy

http://css-tricks.com CSS-Tricks

Chris Coyier has plenty of articles about preprocessor uses

http://sassme.arc90.com/ SassMe

Interactive on-line SASS color playground

http://colorschemedesigner.com/ done in SASS

Bootstrap Without all the Debt https://coderwall.com/p/wixovg

Example CodePen, thebabydino: http://codepen.io/thebabydino

More front-end frameworks, and the preprocessors they use

http://usablica.github.io/front-end-frameworks/compare.html

THEND

Use a spacebar or arrow keys to navigate