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
![Page 1: An Introduction to CSS Preprocessors](https://reader034.vdocuments.net/reader034/viewer/2022052621/5587523ed8b42a70718b46b7/html5/thumbnails/1.jpg)
AN INTRODUCTION TOAN INTRODUCTION TOCSS PREPROCESSORSCSS PREPROCESSORS
SAE ALUMNI CONVENTION, OCTOBER 18TH 2012SAE ALUMNI CONVENTION, OCTOBER 18TH 2012
![Page 2: An Introduction to CSS Preprocessors](https://reader034.vdocuments.net/reader034/viewer/2022052621/5587523ed8b42a70718b46b7/html5/thumbnails/2.jpg)
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
![Page 3: An Introduction to CSS Preprocessors](https://reader034.vdocuments.net/reader034/viewer/2022052621/5587523ed8b42a70718b46b7/html5/thumbnails/3.jpg)
“PREPROCESSOR”“PREPROCESSOR”WHAT EXACTLY IS THAT?WHAT EXACTLY IS THAT?
![Page 4: An Introduction to CSS Preprocessors](https://reader034.vdocuments.net/reader034/viewer/2022052621/5587523ed8b42a70718b46b7/html5/thumbnails/4.jpg)
YOU KNOW…YOU KNOW…
![Page 5: An Introduction to CSS Preprocessors](https://reader034.vdocuments.net/reader034/viewer/2022052621/5587523ed8b42a70718b46b7/html5/thumbnails/5.jpg)
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 ”
![Page 6: An Introduction to CSS Preprocessors](https://reader034.vdocuments.net/reader034/viewer/2022052621/5587523ed8b42a70718b46b7/html5/thumbnails/6.jpg)
“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)
![Page 7: An Introduction to CSS Preprocessors](https://reader034.vdocuments.net/reader034/viewer/2022052621/5587523ed8b42a70718b46b7/html5/thumbnails/7.jpg)
QUICK COMPARISONQUICK COMPARISONCSS VS. PREPROCESSORCSS VS. PREPROCESSOR
![Page 8: An Introduction to CSS Preprocessors](https://reader034.vdocuments.net/reader034/viewer/2022052621/5587523ed8b42a70718b46b7/html5/thumbnails/8.jpg)
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 */
![Page 9: An Introduction to CSS Preprocessors](https://reader034.vdocuments.net/reader034/viewer/2022052621/5587523ed8b42a70718b46b7/html5/thumbnails/9.jpg)
PREPROCESSORSPREPROCESSORSCleaner, shorter syntax
Variables
Interpolation
Nesting
Expressions & Calculations
Mixins, Imports, Functions, Statements, Includes, Inheritance, Loops, Logic …
![Page 10: An Introduction to CSS Preprocessors](https://reader034.vdocuments.net/reader034/viewer/2022052621/5587523ed8b42a70718b46b7/html5/thumbnails/10.jpg)
CHOICES &CHOICES &DISTINCTIONSDISTINCTIONS
LESS, SASS, STYLUSLESS, SASS, STYLUS
![Page 11: An Introduction to CSS Preprocessors](https://reader034.vdocuments.net/reader034/viewer/2022052621/5587523ed8b42a70718b46b7/html5/thumbnails/11.jpg)
“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;}
![Page 12: An Introduction to CSS Preprocessors](https://reader034.vdocuments.net/reader034/viewer/2022052621/5587523ed8b42a70718b46b7/html5/thumbnails/12.jpg)
“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;}
![Page 13: An Introduction to CSS Preprocessors](https://reader034.vdocuments.net/reader034/viewer/2022052621/5587523ed8b42a70718b46b7/html5/thumbnails/13.jpg)
“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
![Page 14: An Introduction to CSS Preprocessors](https://reader034.vdocuments.net/reader034/viewer/2022052621/5587523ed8b42a70718b46b7/html5/thumbnails/14.jpg)
FEATURE RUNDOWNFEATURE RUNDOWNMAKING YOU CURIOUS, USING LESSMAKING YOU CURIOUS, USING LESS
![Page 15: An Introduction to CSS Preprocessors](https://reader034.vdocuments.net/reader034/viewer/2022052621/5587523ed8b42a70718b46b7/html5/thumbnails/15.jpg)
VARIABLES &VARIABLES &INTERPOLATIONINTERPOLATION
@primaryColor: #ffffdb;@imgPath: '../img/';
.widget { background: url('@{imgPath}header_bg.png') repeat-x; color: @primaryColor;}
![Page 16: An Introduction to CSS Preprocessors](https://reader034.vdocuments.net/reader034/viewer/2022052621/5587523ed8b42a70718b46b7/html5/thumbnails/16.jpg)
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
![Page 17: An Introduction to CSS Preprocessors](https://reader034.vdocuments.net/reader034/viewer/2022052621/5587523ed8b42a70718b46b7/html5/thumbnails/17.jpg)
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%}
![Page 18: An Introduction to CSS Preprocessors](https://reader034.vdocuments.net/reader034/viewer/2022052621/5587523ed8b42a70718b46b7/html5/thumbnails/18.jpg)
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);}
![Page 19: An Introduction to CSS Preprocessors](https://reader034.vdocuments.net/reader034/viewer/2022052621/5587523ed8b42a70718b46b7/html5/thumbnails/19.jpg)
IMPORTSIMPORTS
No extra HTTP request
Concatination behind the scenes
// Instead of this@import url('typography.css');
// Do this@import 'typography.css';
![Page 20: An Introduction to CSS Preprocessors](https://reader034.vdocuments.net/reader034/viewer/2022052621/5587523ed8b42a70718b46b7/html5/thumbnails/20.jpg)
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
![Page 21: An Introduction to CSS Preprocessors](https://reader034.vdocuments.net/reader034/viewer/2022052621/5587523ed8b42a70718b46b7/html5/thumbnails/21.jpg)
STATEMENTS & LOGICSTATEMENTS & LOGICif, else, for, each, while
Programming logic applied to CSS
http://thesassway.com/intermediate/if-for-each-while
![Page 22: An Introduction to CSS Preprocessors](https://reader034.vdocuments.net/reader034/viewer/2022052621/5587523ed8b42a70718b46b7/html5/thumbnails/22.jpg)
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 ”
![Page 23: An Introduction to CSS Preprocessors](https://reader034.vdocuments.net/reader034/viewer/2022052621/5587523ed8b42a70718b46b7/html5/thumbnails/23.jpg)
THANK YOUTHANK YOUFOR YOUR ATTENTIONFOR YOUR ATTENTION
![Page 24: An Introduction to CSS Preprocessors](https://reader034.vdocuments.net/reader034/viewer/2022052621/5587523ed8b42a70718b46b7/html5/thumbnails/24.jpg)