an introduction to css preprocessors
DESCRIPTION
The slides to a 30min talk I gave at the sae-alumni-convention.org in October 2012 — hope you like it!TRANSCRIPT
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