CSS Preprocessors. Comparing SASS, LESS and Stylus

CSS PreprocessorsSass, Less and Stylus

Patrick Arlt - @patrickarlt

Some BackgroundI'm an Designer and Developers at Geoloqi Esri.

Design, UX, HTML, CSS, JS, lots of it everyday...

Ok Ok, which is best?Really Short Answer

SASS or Stylus

Slightly Longer AnswerSASS if you are using Ruby. Stylus if you using Node. LESS if

you afraid of the command line.

80/2080% of SASS, LESS and Stylus is the same.

The 20% that is different is in advanced usage.

InstallingSASS

LESS

Stylus

$ gem install sass$ sass --watch style.scss:style.css

<link rel="stylesheet/less" type="text/css" href="styles.less"><script src="less.js" type="text/javascript"></script>

$ npm install less$ lessc styles.less

$ npm install stylus$ stylus css --watch

The 80%Variables

Color Transformation

Mixins

Nesting

Loops & Conditionals

Importing

VariablesSASS

LESS

Stylus

$button-background: #27adec;.btn { background: $button-background;}

@button-background: #27adec;.btn { background: @button-background;}

button-background = #27adec.btn background button-background

Color TransformationsSASS

LESS

Stylus

lighten(@color, 10%);

mix($dark-blue, $light-blue, 25%);

body color: #444 + #111;

Without Params With Params

LESS Mixins.bordered { border: 1px solid #000; border-top-color: #444; border-bottom-color: #444;}

#main { .bordered;}

.border-radius (@r) { -webkit-border-radius: @r; -moz-border-radius: @r; border-radius: @r;}

#main { .border-radius(4px);}

SASS Mixins@mixin border-radius ($radius: 5px) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius;}

#main { @include border-radius(4px);}

Stylus Mixinsborder-radius(n) -webkit-border-radius n -moz-border-radius n border-radius n

#main border-radius(5px)

NestingYou can nest selectors in all three frameworks.

#main{ margin: 0 auto;

.title { font-size: 4em; }

a { text-decoration: none; &:hover { text-decoration: underline; } }

}

ImportsAll 3 support importing from other files or libraries...@import "compass/css3";@import "susy";@import "animation/animate";@import "myfile.scss";

#main { @include border-radius(5px); // from compass/css3 @include span-columns(10); // from susy @include animation(fadeIn); // from animation/animate background: $background-color; // from myfile.scss}

#sidebar { @include span-columns(2 omega); // from susy}

More FeaturesConditionals like "if, "when"MATH!

SASS and StylusLoops like "for", "while", and "each"Much more depth then LESSCustom functions without the Ruby/JS API

The 20%

SASS@extend

@media

@content

@extend.button { background: $blue; color: #fff}

.my-special-button { @extend .button; font-size: 2em;}

.button, .my-special-button { background: $blue; color: #fff}

.my-special-button { font-size: 2em;}

@extend Selectors// This won't be compiled#context a%extreme { color: red; font-weight: bold; font-size: 2em;}

.notice { @extend %extreme;}

#content a.notice { color: $red; font-weight: bold; font-size: 2em;}

@mediaDeclare media queries inside selectors

#content { width: 65%; margin: 0 auto; @media only screen and (max-width : 767px) { width: 90%; }}

#content { width: 65%; margin: 0 auto;}@media only screen and (max-device-width : 768px) { #content { width: 90%; }}

@contentMy favorite SASS feature. Lets you pass whole style blocks

into mixins. Similar to Rubys "yeild". Use it for...

Media Query HelpersRetina ImagesIE Specific StylesCSS3 Polyfills

@content Example<html lang="en">

@mixin for-ie(){ html.ie &{ @content; }}

#browser-warning { display:none; @include for-ie(){ display:block }}

Compass makes SASS even more awesome

CSS3 mixins, supports almost every CSS3 featureTypography styling helpersGenerates CSS spritesProduces cross browser CSS for IE6,7,8Plugin framework via Rubygems

Compass

Compass BootstrapFoundation FrameworkSusy - Responsive GridsCompass Animation

http://compass-style.org/

https://github.com/hecbuma/compass-bootstrap

http://foundation.zurb.com/

http://susy.oddbird.net/

https://github.com/ericam/compass-animation

LESSMixins

Namespaces

Scoped Variables

Client Side Processing

MixinsIn LESS every class is a mixin

.clearfix() { zoom: 1; &:before { content: ''; display: block; } &:after { content: ''; display: table; clear: both; }}

#content { .clearfix();}

Namespaceing MixinsOrganize your mixins into namespaces

#my-framework { .button () { display: block; border: 1px solid @dark-blue; background-color: @blue; color: @light-blue; }}

.a-button { #my-framework > .button;}

Scoped VariablesVariables have scope which makes them it easy to override

@text-color: #444;@background-color: #fafafa;

body { color: @text-color; background: @background-color;}

.inverse { @text-color: #fafafa; @background-color: #444; color: @text-color; background: @background-color;}

h1 { color: @text-color + #111; }

Client-Side CompilingGreat for static HTML sitesSites where you don't have a real server (S3)You can evaluate Javascript in your .less files

Evalute JavasciptYou can evalute a javascript expression as a variable@height: ̀document.body.clientHeight̀;@width: ̀document.body.clientWidth̀;

StylusSyntax

Language Features

@keyframes

Javascript API

Stylus SyntaxWhitespace BasedCan omit { : ; }

The biggest problem I have with Stylus is with its syntax

border-radius() -webkit-border-radius arguments -moz-border-radius arguments border-radius arguments

body font 12px Helvetica, Arial, sans-serif

a.button border-radius(5px)

Stylus LanguageStylus feels very much like a simple programming language

Ruby-like ranges [1..5], [0...5]for/in loopsreal operator precidencecomplex conditionals if/else if/else, unless/else, postfixconditionals

@keyframe SupportCSS3 keyframes are awesome, Stylus makes then easy

This is awesome!

@keyframes pulse 0%, 100% -webkit-transform translateX(0);

20%, 60% -webkit-transform translateX(-10px);

40%, 80% -webkit-transform translateX(10px);

Javascript APIYou could do a whole talk on the Stylus API, here are some

ideas...

Declare really custom functionsUse Node modules like canvasDo Compass-like sprite generationCreate your own CSS framework

NibCSS3 helpers - gradiants, border-radius, ect...Mixins for common css patternsExtends CSS with new properties and values

#feedback fixed: bottom right

#logo image: '/img/logo.png'

h1 overflow: ellipsis

Smackdown!Who Wins?

LESS LoosesLESS just doesn't have the features or power of SASS or

Stylus

Nothing like Compass or NibNo plugin systemCan't define your own functions with just LESSDoesn't output any debugging info

SASS vs. StylusBoth have similar features, a powerful plugin ecosystem,

and lots of CSS3 helpers.

SASS syntax is close to CSSStylus is closer to a programming languageIf you use Ruby you will probally use SASSIf you use Node you will probally use Stylus

QuestionsPatrick Arlt - @patrickarlt

Technology

CSS Preprocessors. Comparing SASS, LESS and Stylus