deep dive into css preprocessors

CSS Preprocessors

@SFHTML5 – May 31st 2012

Deep dive into

Jonathan Verrecchia

Front-End Engineer at

Author of a French book about HTML5

Created H5BP's builder

I'm @verekia and I blog on verekia.com

Questions

• Feel free to interrupt me at anytime

• Or tweet your questions using #csspp

?

I will talk about

• CSS weaknesses

• Preprocessors features

• Common misconceptions

• Sass, Less or Stylus?

• Workflow and techniques

• Preprocessors + OOCSS

CSS weaknesses

At the office...

Product Manager:

“Can we try changing our theme quickly? I think blue buttons would be more engaging!”

You:

“Hm... It's not that quick. Come back in 30 min?”

Product Manager 30 min later:

“Ah it's ugly! Can we try a lighter blue and compare it to this orange and green too?”

CSS variables?

You won't be able to use them until

IE 7, 8, 9 , 10, 11, [...] usage drops below 1%.

“Variables... finally!”

3 major CSS weaknesses

• Lack of essential basic features

• Hard to maintain (huge messy CSS files)

• Not DRY enough - leads to mistakes

Working with multiple files

Having multiple CSS files is essential for maintainability and collaboration

But @import sucks (additional HTTP requests)

We need to use a build tool for concatenation.

... but maybe it can do more than just that?

This is what CSS preprocessors do :)

The 3 most popular preprocessors

They are all great :)

Features

About those features...

Less, Sass and Stylus support them all

They don't enhance CSS, but improve your development workflow

Variables

They are actually constants (and it's fine)

$my_blue: #4e6cb0; // Sass @my_blue: #4e6cb0; // Less my_blue = #4e6cb0; // Stylus $primary_color: $my_blue; h1 { color: $primary_color; }

Variables Types

Variables are not just for colors!

$fonts: Helvetica, Arial, sans-serif; $images_path: "../img/" $font-size: 1.5em; $margin: 20px; $width: 80%;

Operations and color functions

Math and colors operations

Color functions

width: 25px * 4 + 100px / 2 – 50px; // = 100px color: #990033 + #666666; // = #FF66CC

$light_blue: lighten($my_blue, 20%); $flashy_blue: saturate($my_blue, 50%);

Mixins

Functions like lighten() return a value.

Mixins don't return anything but output CSS.

@mixin border-radius($radius: 10px) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } .button { @include border-radius(4px); }

Nesting .pop { .pop-btn { } } // ======== OUTPUT ======== .pop {} .pop .pop-btn {}

.link { &:hover { } } // ======== OUTPUT ======== .link {} .link:hover {}

Don't nest too much (4 levels max)

Imports and minification

Imports now work with no performance costs!

CSS output can be clear or minified

@import "colors"; @import "typography"; @import "layout";

#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}

Misconceptions

“I need a Ruby or Node backend”

• Sass is written in Ruby

• Less and Stylus are written in JavaScript

This does NOT mean you need Ruby or Node on your production server to use them.

You need them on your

development machine.

“Less runs client-side”

Less can run client-side.

OK for quick testing or to compile in-browser if you can't access your dev environment.

Never - EVER - use it in production, it's even worse than CSS' @import for performance.

Always use Node (or Rhino).

“It's hard to install”

Both Ruby and Node are easy to install on any platform:

Ruby is pre-installed, Node.pkg

RubyInstaller.exe, Node.exe

apt-get install ruby / nodejs

“Bootstrap uses Less, so it's better”

According to @fat, they chose Less because:

• It was compiling faster than Sass (probably not true anymore since Sass has caching)

• They are friends with Alexis Sellier (Less) so they can easily request a fix or a feature

So nothing you should worry about.

Even big guys can make mistakes

Sass, Less or Stylus?

How to choose?

Bad criterion

• The syntax (almost the same)

• Twitter Bootstrap (exists in Sass)

Good criterion

• Available features (Sass and Stylus)

• Community (Sass and Less)

• Ruby vs. JS if you want to get involved

Related projects

Sass: Hampton Catlin - @hcatlin (Inventor)

Nathan Weizenbaum - @nex3 (Lead developer)

Stylus: TJ Holowaychuk - @tjholowaychuk

Lead and (almost) unique developer of Less

Choose wisely...

Sass welcome package!

• 2 syntaxes: .sass and .scss (CSS-like)

• Twitter Bootstrap and ZURB Foundation

• Even more crazy features (extend, if, for...)

Recommended blog:

Compass

Chris Eppstein - @chriseppstein (Sass core)

CSS3, Spriting, Grids, Typography, Data-URLs, Cross-browser, assets path, tons of helpers...

@import "compass/css3/border-radius"; .button { @include border-radius(10px); }

sonspring.com

Workflow

Installing and Running

Just Sass:

Sass + Compass:

> gem install sass > sass --watch <path>

> gem install compass > compass create <path> > compass watch

Avoiding the command line

Codekit

GUI compilers

Codekit, LiveReload, Less.app, Compass.app, Scout, Crunchapp, SimpLess

Compass.app, Scout, Crunchapp, SimpLess, WinLess, LiveReload (alpha)

Compass.app, Scout, Crunchapp, SimpLess

Syntax Highlighting

Editors and IDEs that support Sass:

VIM, Emacs, Sublime Text 2, TextMate, Eclipse, NetBeans, WebStorm, Visual Studio, PyCharm, RadRails, RubyMine, Komodo, Coda, GEdit, [...]

Project structure example css/

global.scss

currentpage.scss

scss/

global/

_colors.scss

_helpers.scss

_mixins.scss

_reset.scss

_typography.scss

components/

_buttons.scss

_popups.scss

global.css

currentpage.css

Underscore-prefixed files don't generate .css files

Debugging

Debug mode

Firebug plugin: FireSass

> sass –-watch <path> --debug-info

Techniques

Handy conversions

Pixels to ems

Pixels to percentages

$wrapper_width: 1140px; .responsive-unit { width: percentage(200px / $wrapper_width) margin: percentage(15px / $wrapper_width) }

font-size: (18px / $context) * 1em; // 1.125em

Nesting and Media Queries

Sass 3.2 allows blocks as mixins parameters:

.menu-item { display: inline-block; @media screen and (max-width: 480px) { display: block; } }

.menu-item { display: inline-block; @include respond-to(small-screen) { display: block; } }

Mobile-first responsive design

@media (min-width: 480px) {}

Mobile-first responsive design

Mobile-first responsive design

by Nicolas Gallagher ♥

// modern.scss @import "base"; @media (min-width: 480px) { @import "480-up" } @media (min-width: 768px) { @import "768-up" } @media (min-width: 1200px) { @import "1200-up" }

// ie.scss @import "base"; @import "480-up"; @import "768-up";

Using nesting with Modernizr and IE

.menu-item { display: inline-block; .ltie8 & { display: inline; zoom: 1; } } // ======== OUTPUT ======== .menu-item {} .ltie8 .menu-item {}

.map { .no-geolocation & { background: "map.png"; } } // ======== OUTPUT ======== .map {} .no-geolocation .map {}

Generating a color palette

by Joshua Johnson

$base: #633; $complement1: adjust-hue($base, 180); $complement2: darken(adjust-hue($base, 180), 5%); $lighten1: lighten($base, 15%); $lighten2: lighten($base, 30%);

OOCSS

OOCSS

OOCSS is a popular solution for large-scale CSS websites by Nicole Sullivan (@stubbornella)

Its core principle is to use multiple classes to make objects inherit from each other

It's heavy for the DOM but very efficient in terms of CSS file size in the long run

<a class="button big-button">

Facebook's DOM

MOTHER OF DOM...

SASS has @Extend .button { background: #00f; } .big-button { @extend .button; width: 200px; } // ======== OUTPUT ======== .button, .big-button { background: #00f } .big-button { width: 200px }

@Extend vs OOCSS

If you build a complex components library with @extend, you'll have a LOT of selectors

• @extend ruins your production CSS

• OOCSS ruins your DOM

My opinion: At some point @extend might overtake OOCSS when we'll have better tools

(we debug seamlessly minified CSS already)

Preprocessors + OOCSS

Without @extend, preprocessors and OOCSS are perfectly compatible

Preprocessors are for the stuff you don't want in your production CSS (they help developers)

OOCSS is for the stuff you want in your production CSS (it is performant)

Developer Efficiency Chart

Naive CSS

Less Stylus Sass

OOCSS

Less OOCSS

Stylus OOCSS

Sass OOCSS

Parameters: • DRY and file size • Features • Community

By becoming web developers, you agreed on staying up to date with all the new cool stuff.

This is the new cool stuff :)

Thanks!

verekia.com/slides/css-preprocessors

by @verekia