This document provides information about CSS preprocessors like Sass, LESS, and Stylus. It discusses how they extend CSS with features like variables, mixins, functions, and nested rules to make stylesheets more maintainable and reusable. Preprocessors compile code written in their own syntax to regular CSS understood by browsers. While offering powerful features, preprocessors also introduce a learning curve and potential for code bloat if not used properly.

1. 10
2102 HT81 REBOTCO , NOIT NEV NOC I NMULA EAS
CSS PREPROCESSORS
O T N OI T CU D O R TNI N A
O T N OI T CU D O R TNI N A

2. O R TNI K CIU Q
O R TNI K CIU Q
EM TUOBA
EM TUOBA
Milos Sutanovac
Front-End Engineer
Uhm… something with code & design, I guess?
JavaScript, HTML5, CSS3 @ SAE Munich
Bachelor of Arts, Web Development
twitter.com/mixn

3. ?TAHT SI YLTCAXE TAHW
?TAHT SI YLTCAXE TAHW
” R OSS E C O RP E RP “
” R OSS E C O RP E RP “

4. …WONK UO Y
…WONK UO Y

5. AI D EPI KI W
AI D EPI KI W
“ 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 ”

6. ” R OSS E C O RP E RP SS C “
” R OSS E C O RP E RP SS C “
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)

7. ROSSECOR PER P .SV SSC
ROSSECOR PER P .SV SSC
N OSI R AP M O C K CI U Q
N OSI R AP M O C K CI U Q

8. SS C
SS C
No expressions or math
wdh 5*(0p +2;/ 50x Wsfltikn *
it: 10x ) * 1p? ihu hnig /
No logic
Lack of variables
Lack of abstraction
@motul'yorpycs)
ipr r(tpgah.s';
@motul'ics)
ipr r(u.s';
/ EtaHT rqet *
* xr TP euss /
Vendor Prefix Hell

9. S R OSS E C O RP E RP
S R OSS E C O RP E RP
Cleaner, shorter syntax
Variables
Interpolation
Nesting
Expressions & Calculations
Mixins, Imports, Functions, Statements, Includes, Inheritance, Loops, Logic …

10. U
SULYTS ,SSAS ,SSEL
S N OI T C NI TSI D
S N OI T C NI TSI D
& S E CI O H C
& S E CI O H C

11. ”EGAUG NAL TEEHSELYTS CIMA NYD EHT“
”EGAUG NAL TEEHSELYTS CIMA NYD EHT“
Alexis Sellier
lesscss.org
Originally in Ruby, deprecated & replaced by JavaScript
.less
Installation
nmisalls
p ntl es
ls syels
es tl.es
Syntax example
@oo:#0FE
clr CFE;
.igt{
wde
bcgon:@oo;
akrud clr
}

12. ”EDUTITTA HTIW ELYTS“
”EDUTITTA HTIW ELYTS“
Hampton Catlin, Nathan Weizenbaum & Chris Eppstein
sass-lang.com
Written in Ruby
.scss, .sass
Installation
gmisalss
e ntl as
m syecssyess
v tl.s tl.cs
ss syess syecs
as tl.cs tl.s
ss -wthsyess
as -ac tl.as
Syntax example
$oo:#0FE
clr CFE;
.igt{
wde
bcgon:$oo;
akrud clr
}

13. ”SSC TSUBOR ,CIMA NYD ,EVISSER PXE“
”SSC TSUBOR ,CIMA NYD ,EVISSER PXE“
TJ Holowaychuk
learnboost.github.com/stylus
Written in JavaScript
.styl
Installation
nmisalsyu
p ntl tls
syu - syesy
tls c tl.tl
Syntax example
clr=#0FE
oo CFE
.igt
wde
clrclr
oo oo

14. SSEL G NISU ,SUOIRUC UOY G NI KAM
SSEL G NISU ,SUOIRUC UOY G NI KAM
N WO DNU R E RU TA E F
N WO DNU R E RU TA E F

15. & S EL B AI R A V
& S EL B AI R A V
N OI T AL OP R E TNI
N OI T AL OP R E TNI
@rmrClr #ffb
piayoo: ffd;
@mPt:'.ig'
igah ./m/;
.igt{
wde
bcgon:ul'{mPt}edrb.n' rpa-;
akrud r(@igahhae_gpg) eetx
clr @rmrClr
oo: piayoo;
}

16. G NI TS E N
G NI TS E N
@otie 10;
fnSz: 6%
nv{
a
fn-ie @otie
otsz: fnSz;
l {
i
fot lf;
la: et
a{
dsly iln-lc;
ipa: niebok
&hvr{
:oe
clr htik
oo: opn;
}
}
}
}
Dangerous, can result in code bloat
Preprocessing or not, embrace things like SMACSS & OOCSS
CSS structure !== HTML structure
Inception rule: don’t go more than four levels deep

17. & S N OISS E RP X E
& S N OISS E RP X E
SN OI T ALU CL A C
SN OI T ALU CL A C
@o:5;
fo %
@a:@o *2 / 5 *2=1%
br fo ; / % 0
@abz (br+@o)*5 / (0 +5)*5=7%
fza: @a fo ; / 1% % 5
.igt{
wde
wdh @abz-2;/ 7%-2 =5%
it: fza 5 / 5 5 0
}

18. SNIXI M
SNIXI M
.nmtd{
aiae
-ektaiain ple.ses-n
wbi-nmto: us 5 aei;
-o-nmto:ple.ses-n
mzaiain us 5 aei;
-saiain ple.ses-n
m-nmto: us 5 aei;
--nmto:ple.ses-n
oaiain us 5 aei;
aiain ple.ses-n
nmto: us 5 aei;
}
.nmtdwde {
aiae_igt
.nmtd
aiae;
}
Can have parameters (with default values)
.nmtd(tmnFnto:lna){
aiae @iigucin ier
-ektaiain ple.s@iigucin
wbi-nmto: us 5 tmnFnto;
-o-nmto:ple.s@iigucin
mzaiain us 5 tmnFnto;
-saiain ple.s@iigucin
m-nmto: us 5 tmnFnto;
--nmto:ple.s@iigucin
oaiain us 5 tmnFnto;
aiain ple.s@iigucin
nmto: us 5 tmnFnto;
}
.nmtdwde {
aiae_igt
.nmtd
aiae;
}
.nte_nmtdwde {
aohraiae_igt
.nmtdes-n;
aiae(aei)
}

19. S T R OP MI
S T R OP MI
/ Isedo ti
/ nta f hs
@motul'yorpycs)
ipr r(tpgah.s';
/ D ti
/ o hs
@mot'yorpycs;
ipr tpgah.s'
No extra HTTP request
Concatination behind the scenes

20. SN OI T CNU F
SN OI T CNU F
lgtn@oo,1%;
ihe(clr 0) / rtr aclrwihi 1%lgtrta @oo
/ eun oo hc s 0 ihe hn clr
dre(clr 1%;
akn@oo, 0) / rtr aclrwihi 1%dre ta @oo
/ eun oo hc s 0 akr hn clr
strt(clr 1%;
auae@oo, 0) / rtr aclr1%mr strtdta @oo
/ eun oo 0 oe auae hn clr
dstrt(clr 1%; / rtr aclr1%ls strtdta @oo
eauae@oo, 0) / eun oo 0 es auae hn clr
fdi(clr 1%;
aen@oo, 0) / rtr aclr1%ls tasaetta @oo
/ eun oo 0 es rnprn hn clr
fdot@oo,1%;
aeu(clr 0) / rtr aclr1%mr tasaetta @oo
/ eun oo 0 oe rnprn hn clr
fd(clr 5%;
ae@oo, 0) / rtr @oo wt 5%tasaec
/ eun clr ih 0 rnprny
si(clr 1)
pn@oo, 0; / rtr aclrwt a1 dge lre i heta @oo
/ eun oo ih 0 ere agr n u hn clr
si(clr -0;
pn@oo, 1) / rtr aclrwt a1 dge salrheta @oo
/ eun oo ih 0 ere mle u hn clr
mx@oo1 @oo2;
i(clr, clr) / rtr amxo @oo1ad@oo2
/ eun i f clr n clr
Sass & Stylus offer even more

21. CI G O L & S T N E M E T A TS
CI G O L & S T N E M E T A TS
if, else, for, each, while
Programming logic applied to CSS
http://thesassway.com/intermediate/if-for-each-while

22. S K C A B W A R D E M OS
S K C A B W A R D E M OS
TCEFRE P SI G NIHTO N ESUACEB
TCEFRE P SI G NIHTO N ESUACEB
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: CodeKit , LiveReload , Compass.app , SCOUT
Learn it — it’s the most powerful tool you have
“ 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 ”

23. NOIT NETTA RUOY ROF
NOIT NETTA RUOY ROF
UO Y KNAH T
UO Y KNAH T