Using CSS Preprocessors

effectively.

Jonas Wagner

Known for doing crazy and creative stuff
Works as Software Engineer at local.ch
- One of Switzerlands biggest websites
- 3.1 mio unique clients

Issues with CSS

No variables
No hierarchy
Prefixes
Sprites
Lack of abstraction

The Solution

CSS Preprocessors.

Choosing a Preprocessor

CSS Preprocessors

Sass.

Official implementation is in Ruby
Two dialects scss and sass
Sassy CSS
Syntactically Awesome Stylesheets
PySCSS is an implementation of SCSS in Python
Compass is a Framework for use with SCSS

{less}

Originally written in Ruby
Now implemented using JavaScript
Can be compiled on the client and using node.js.
Twitter Bootstrap uses LESS

Choosing a Preprocessor

Features virtually equivalent
Both are a superset of CSS
I recommend SCSS
- More explicit syntax
- Compass offers lot's of goodies
- Decent Python implementation

Features

Variables

$textColor: #222333;

p {
    color: $textColor;
}

p { color: #222333; }

Styleguide

Math and Functions

p.x {
    $totalWidth: 120px;
    $padding: 12px;

    padding: $padding;
    width: $totalWidth - $padding * 2.0;
}

p {
    color: lighten($textColor, 10%);
}

Styleguide

Nesting

.navigation {
    li {
        background-color: red;
    }
    a {
        color: white;
        font-weight: bold;
    }
}

.navigation li {
    background-color: red;
}
.navigation a {
    color: white;
    font-weight: bold;
}

CSS Hacks

.something {
    font-family: Helvetica, Sans-Serif;
    /* hack for ie6 */
    _font-family: Comic Sans, Comic Sans MS;
}

.something {
    font-family: Helvetica, Sans-Serif;
    .ie6 & {
        font-family: Comic Sans, Comic Sans MS;
    }
}

<!--[if lt IE 7]>
<html class='ie6 oldie'>
<![endif]-->
<!--[if IE 7]>
<html class='ie7 oldie'>
<![endif]-->
<!--[if IE 8]>
<html class='ie8'>
<![endif]-->
<!--[if gt IE 8]><!-->
<html>
<!--<![endif]-->

Modernizr and nesting

.box {
   // simulated box shadow using borders
   border-bottom: 1px solid #666;
   border-right: 1px solid #777;
   .boxshadow & {
        border: none;
        box-shadow: #666 1px 1px 1px;
   }
}

Mixins

@mixin text-colored {
    color: $textColor;
}

p {
    @include text-colored;
}

p { color: #222333; }

Vendor Prefixes

p {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

Vendor Prefixes

@mixin border-radius($value){
    -moz-border-radius: $value;
    -webkit-border-radius: $value;
    -ms-border-radius: $value;
    -o-border-radius: $value;
    border-radius: $value;
}

p {
    @include border-radius(2px 2px 0 0);
}

Vendor Prefixes

@mixin vendor-prefix($property, $value){
  -moz-#{$property} : $value;
  -webkit-#{$property} : $value;
  -ms-#{$property} : $value;
  -o-#{$property} : $value;
  #{$property} : $value;
}

@mixin border-radius($value){
  @include vendor-prefix('border-radius', $value);
}

Common Patterns

@mixin clearfix {
  &:before, &:after {
    content: "\0020";
    display: block;
    height: 0;
    visibility: hidden;
  }

  &:after {
    clear: both;
  }

  zoom: 1;
}

Common Patterns

@mixin no-select() {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.home-icon {
    background: url('imgs/sprite.png') no-repeat -922px -210px;
    width: 72px;
    height: 58px;
}

Sprites

$icons: sprite-map("icons/*.png");
.home-icon {
    sprite($icons, home);
}

.home-icon {
    background: url('/static/assets/u8Y7yEQL0UffAVw5rX7yhw.png?_=1298240989') 0 -24px no-repeat;
}

@import

_colors.scss

$yellow: #ff0;

application.scss

@import colors;
.snow { color: $yellow; }

application.css

.snow { color: #ff0; }

@import

_colors.scss

$yellow: #ff0;
.sun { color: $yellow; }

application.scss

@import colors;
.snow { color: $yellow; }

application.css

.sun { color: #ff0; }
.snow { color: #ff0; }

Organizing files

Separate definitions from rule sets
Filenames for definitions start with an _
Never import a rule set into a definition
(Create a _global.scss file to import all your definitions in one go)

Implementation

Tools

Good editor support
Graphical Tools like LiveReload and Compass.app
FireSASS

Using CSS Preprocessors

effectively.

Jonas Wagner

Issues with CSS

The Solution

CSS Preprocessors.

Choosing a Preprocessor

CSS Preprocessors

Sass.

{less}

Choosing a Preprocessor

Features

Variables

Styleguide

Math and Functions

Styleguide

Nesting

CSS Hacks

Modernizr and nesting

Mixins

Vendor Prefixes

Vendor Prefixes

Vendor Prefixes

Common Patterns

Common Patterns

Sprites

@import

_colors.scss

application.scss

application.css

@import

_colors.scss

application.scss

application.css

Organizing files

Implementation

Tools

Drawbacks

Increased complexity

Conclusion

Conclusion

Questions?

Did you like this presentation?

Get the slides