AN INTRODUCTION TOAN INTRODUCTION TOCSS PREPROCESSORSCSS PREPROCESSORS

SAE ALUMNI CONVENTION, OCTOBER 18TH 2012SAE ALUMNI CONVENTION, OCTOBER 18TH 2012

QUICK INTROQUICK INTROABOUT MEABOUT ME

Milos Sutanovac

Front-End Engineer

Uhm… something with code & design, I guess?

JavaScript, HTML5, CSS3 @

Bachelor of Arts, Web Development

SAE Munich

twitter.com/mixn

“PREPROCESSOR”“PREPROCESSOR”WHAT EXACTLY IS THAT?WHAT EXACTLY IS THAT?

YOU KNOW…YOU KNOW…

WIKIPEDIAWIKIPEDIA“ In computer science, a preprocessor is a program that processes

its input data to produce output that is used as input to another

program. [...] — Wikipedia ”

“CSS PREPROCESSOR”“CSS PREPROCESSOR”Extension to CSS, which compiles to regular CSS

Superset

More functionalities

Outputs regular, cross-browser code

No limitations, since not regular CSS

Makes CSS more flexible & fun to write (again)

QUICK COMPARISONQUICK COMPARISONCSS VS. PREPROCESSORCSS VS. PREPROCESSOR

CSSCSSNo expressions or math

No logic

Lack of variables

Lack of abstraction

Vendor Prefix Hell

width: 5 * (100px + 2); /* 510px? Wishful thinking */

@import url('typography.css');@import url('ui.css');

/* Extra HTTP requests */

PREPROCESSORSPREPROCESSORSCleaner, shorter syntax

Variables

Interpolation

Nesting

Expressions & Calculations

Mixins, Imports, Functions, Statements, Includes, Inheritance, Loops, Logic …

CHOICES &CHOICES &DISTINCTIONSDISTINCTIONS

LESS, SASS, STYLUSLESS, SASS, STYLUS

“THE DYNAMIC STYLESHEET LANGUAGE”“THE DYNAMIC STYLESHEET LANGUAGE”

Alexis Sellier

Originally in Ruby, deprecated & replaced by JavaScript

.lessInstallation

Syntax example

lesscss.org

npm install lessless style.less

@color: #C0FFEE;

.widget { background: @color;}

“STYLE WITH ATTITUDE”“STYLE WITH ATTITUDE”

Hampton Catlin, Nathan Weizenbaum & Chris Eppstein

Written in Ruby

.scss, .sassInstallation

Syntax example

sass-lang.com

gem install sassmv style.css style.scsssass style.scss style.csssass --watch style.sass

$color: #C0FFEE;

.widget { background: $color;}

“EXPRESSIVE, DYNAMIC, ROBUST CSS”“EXPRESSIVE, DYNAMIC, ROBUST CSS”

TJ Holowaychuk

Written in JavaScript

.stylInstallation

Syntax example

learnboost.github.com/stylus

npm install stylusstylus -c style.styl

color = #C0FFEE

.widget color color

FEATURE RUNDOWNFEATURE RUNDOWNMAKING YOU CURIOUS, USING LESSMAKING YOU CURIOUS, USING LESS

VARIABLES &VARIABLES &INTERPOLATIONINTERPOLATION

@primaryColor: #ffffdb;@imgPath: '../img/';

.widget { background: url('@{imgPath}header_bg.png') repeat-x; color: @primaryColor;}

NESTINGNESTING

Dangerous, can result in code bloat

Preprocessing or not, embrace things like &

CSS structure !== HTML structure

Inception rule: don’t go more than four levels deep

@fontSize: 160%;

nav { font-size: @fontSize; li { float: left; a { display: inline-block; &:hover { color: hotpink; } } }}

SMACSS OOCSS

EXPRESSIONS &EXPRESSIONS &CALCULATIONSCALCULATIONS

@foo: 5%;@bar: @foo * 2; // 5% * 2 = 10%@fazbaz: (@bar + @foo) * 5; // (10% + 5%) * 5 = 75%

.widget { width: @fazbaz - 25; // 75% - 25 = 50%}

MIXINSMIXINS

Can have parameters (with default values)

.animated { -webkit-animation: pulse .5s ease-in; -moz-animation: pulse .5s ease-in; -ms-animation: pulse .5s ease-in; -o-animation: pulse .5s ease-in; animation: pulse .5s ease-in;}

.animated_widget { .animated;}

.animated (@timingFunction: linear) { -webkit-animation: pulse .5s @timingFunction; -moz-animation: pulse .5s @timingFunction; -ms-animation: pulse .5s @timingFunction; -o-animation: pulse .5s @timingFunction; animation: pulse .5s @timingFunction;}

.animated_widget { .animated;}

.another_animated_widget { .animated(ease-in);}

IMPORTSIMPORTS

No extra HTTP request

Concatination behind the scenes

// Instead of this@import url('typography.css');

// Do this@import 'typography.css';

FUNCTIONSFUNCTIONS

Sass & Stylus offer even

lighten(@color, 10%); // return a color which is 10% lighter than @colordarken(@color, 10%); // return a color which is 10% darker than @color

saturate(@color, 10%); // return a color 10% more saturated than @colordesaturate(@color, 10%); // return a color 10% less saturated than @color

fadein(@color, 10%); // return a color 10% less transparent than @colorfadeout(@color, 10%); // return a color 10% more transparent than @colorfade(@color, 50%); // return @color with 50% transparency

spin(@color, 10); // return a color with a 10 degree larger in hue than @colorspin(@color, -10); // return a color with a 10 degree smaller hue than @color

mix(@color1, @color2); // return a mix of @color1 and @color2

more

STATEMENTS & LOGICSTATEMENTS & LOGICif, else, for, each, while

Programming logic applied to CSS

http://thesassway.com/intermediate/if-for-each-while

SOME DRAWBACKSSOME DRAWBACKSBECAUSE NOTHING IS PERFECTBECAUSE NOTHING IS PERFECT

Working on a team

Editing the compiled .css file

Increases room for errors

Potential code bloat

Choice?

Not without a learning curve — but what is?

Command Line

Can be avoided: , , ,

Learn it — it’s the most powerful tool you have

CodeKit LiveReload Compass.app SCOUT

“ Learn to love the command line. It isn’t scary. You know how to use

Photoshop which has 300 buttons — THAT’S scary. — Stephen Hay ”

THANK YOUTHANK YOUFOR YOUR ATTENTIONFOR YOUR ATTENTION