10   2102 HT81 REBOTCO , NOIT NEV NOC I NMULA EASCSS PREPROCESSORSO T N OI T CU D O R TNI N AO T N OI T CU D O R TNI N A
O R TNI K CIU Q              O R TNI K CIU Q                             EM TUOBA                             EM TUOBAMilo...
?TAHT SI YLTCAXE TAHW      ?TAHT SI YLTCAXE TAHW” R OSS E C O RP E RP “” R OSS E C O RP E RP “
…WONK UO Y…WONK UO Y
AI D EPI KI W                AI D EPI KI W“ In computer science, a preprocessor is a program that processes   its input da...
” 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 CSSSupersetMore functi...
ROSSECOR PER P .SV SSC       ROSSECOR PER P .SV SSCN OSI R AP M O C K CI U QN OSI R AP M O C K CI U Q
SS C                         SS CNo expressions or mathwdh 5*(0p +2;/ 50x Wsfltikn *it:    10x ) * 1p? ihu hnig /No logicL...
S R OSS E C O RP E RP        S R OSS E C O RP E RPCleaner, shorter syntaxVariablesInterpolationNestingExpressions & Calcul...
U     SULYTS ,SSAS ,SSELS N OI T C NI TSI DS N OI T C NI TSI D & S E CI O H C & S E CI O H C
”EGAUG NAL TEEHSELYTS CIMA NYD EHT“             ”EGAUG NAL TEEHSELYTS CIMA NYD EHT“Alexis Sellierlesscss.orgOriginally in ...
”EDUTITTA HTIW ELYTS“                     ”EDUTITTA HTIW ELYTS“Hampton Catlin, Nathan Weizenbaum & Chris Eppsteinsass-lang...
”SSC TSUBOR ,CIMA NYD ,EVISSER PXE“               ”SSC TSUBOR ,CIMA NYD ,EVISSER PXE“TJ Holowaychuklearnboost.github.com/s...
SSEL G NISU ,SUOIRUC UOY G NI KAM    SSEL G NISU ,SUOIRUC UOY G NI KAMN WO DNU R E RU TA E FN WO DNU R E RU TA E F
& 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: ff...
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: ...
& 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...
SNIXI M                        SNIXI M.nmtd{ aiae  -ektaiain ple.ses-n  wbi-nmto: us 5 aei;  -o-nmto:ple.ses-n  mzaiain us...
S T R OP MI                     S T R OP MI/ Isedo ti / nta f hs@motulyorpycs) ipr r(tpgah.s;/ D ti / o hs@motyorpycs; ipr...
SN OI T CNU F                 SN OI T CNU Flgtn@oo,1%; ihe(clr 0)        / rtr aclrwihi 1%lgtrta @oo                    / ...
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 TSif, else, for, each, whileProgramming logic applied to CSShttp:...
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                  TCEF...
NOIT NETTA RUOY ROF NOIT NETTA RUOY ROFUO Y KNAH TUO Y KNAH T
An Introduction to CSS Preprocessors
Upcoming SlideShare
Loading in …5
×

An Introduction to CSS Preprocessors

776 views

Published on

The slides to a 30min talk I gave at the sae-alumni-convention.org in October 2012 — hope you like it!

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
776
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
14
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

An Introduction to CSS Preprocessors

  1. 1. 10 2102 HT81 REBOTCO , NOIT NEV NOC I NMULA EASCSS PREPROCESSORSO T N OI T CU D O R TNI N AO T N OI T CU D O R TNI N A
  2. 2. O R TNI K CIU Q O R TNI K CIU Q EM TUOBA EM TUOBAMilos SutanovacFront-End EngineerUhm… something with code & design, I guess?JavaScript, HTML5, CSS3 @ SAE MunichBachelor of Arts, Web Developmenttwitter.com/mixn
  3. 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. 4. …WONK UO Y…WONK UO Y
  5. 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. 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 CSSSupersetMore functionalitiesOutputs regular, cross-browser codeNo limitations, since not regular CSSMakes CSS more flexible & fun to write (again)
  7. 7. ROSSECOR PER P .SV SSC ROSSECOR PER P .SV SSCN OSI R AP M O C K CI U QN OSI R AP M O C K CI U Q
  8. 8. SS C SS CNo expressions or mathwdh 5*(0p +2;/ 50x Wsfltikn *it: 10x ) * 1p? ihu hnig /No logicLack of variablesLack of abstraction@motulyorpycs)ipr r(tpgah.s;@motulics)ipr r(u.s;/ EtaHT rqet * * xr TP euss /Vendor Prefix Hell
  9. 9. S R OSS E C O RP E RP S R OSS E C O RP E RPCleaner, shorter syntaxVariablesInterpolationNestingExpressions & CalculationsMixins, Imports, Functions, Statements, Includes, Inheritance, Loops, Logic …
  10. 10. U SULYTS ,SSAS ,SSELS N OI T C NI TSI DS N OI T C NI TSI D & S E CI O H C & S E CI O H C
  11. 11. ”EGAUG NAL TEEHSELYTS CIMA NYD EHT“ ”EGAUG NAL TEEHSELYTS CIMA NYD EHT“Alexis Sellierlesscss.orgOriginally in Ruby, deprecated & replaced by JavaScript.lessInstallationnmisallsp ntl esls syelses tl.esSyntax example@oo:#0FEclr CFE;.igt{ wde bcgon:@oo; akrud clr}
  12. 12. ”EDUTITTA HTIW ELYTS“ ”EDUTITTA HTIW ELYTS“Hampton Catlin, Nathan Weizenbaum & Chris Eppsteinsass-lang.comWritten in Ruby.scss, .sassInstallationgmisalss e ntl asm syecssyess v tl.s tl.csss syess syecs as tl.cs tl.sss -wthsyess as -ac tl.asSyntax example$oo:#0FEclr CFE;.igt{ wde bcgon:$oo; akrud clr}
  13. 13. ”SSC TSUBOR ,CIMA NYD ,EVISSER PXE“ ”SSC TSUBOR ,CIMA NYD ,EVISSER PXE“TJ Holowaychuklearnboost.github.com/stylusWritten in JavaScript.stylInstallationnmisalsyup ntl tlssyu - syesytls c tl.tlSyntax exampleclr=#0FEoo CFE.igtwde clrclr oo oo
  14. 14. SSEL G NISU ,SUOIRUC UOY G NI KAM SSEL G NISU ,SUOIRUC UOY G NI KAMN WO DNU R E RU TA E FN WO DNU R E RU TA E F
  15. 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. 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 bloatPreprocessing or not, embrace things like SMACSS & OOCSSCSS structure !== HTML structureInception rule: don’t go more than four levels deep
  17. 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. 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. 19. S T R OP MI S T R OP MI/ Isedo ti / nta f hs@motulyorpycs) ipr r(tpgah.s;/ D ti / o hs@motyorpycs; ipr tpgah.sNo extra HTTP requestConcatination behind the scenes
  20. 20. SN OI T CNU F SN OI T CNU Flgtn@oo,1%; ihe(clr 0) / rtr aclrwihi 1%lgtrta @oo / eun oo hc s 0 ihe hn clrdre(clr 1%; akn@oo, 0) / rtr aclrwihi 1%dre ta @oo / eun oo hc s 0 akr hn clrstrt(clr 1%; auae@oo, 0) / rtr aclr1%mr strtdta @oo / eun oo 0 oe auae hn clrdstrt(clr 1%; / rtr aclr1%ls strtdta @oo eauae@oo, 0) / eun oo 0 es auae hn clrfdi(clr 1%; aen@oo, 0) / rtr aclr1%ls tasaetta @oo / eun oo 0 es rnprn hn clrfdot@oo,1%; aeu(clr 0) / rtr aclr1%mr tasaetta @oo / eun oo 0 oe rnprn hn clrfd(clr 5%; ae@oo, 0) / rtr @oo wt 5%tasaec / eun clr ih 0 rnprnysi(clr 1) pn@oo, 0; / rtr aclrwt a1 dge lre i heta @oo / eun oo ih 0 ere agr n u hn clrsi(clr -0; pn@oo, 1) / rtr aclrwt a1 dge salrheta @oo / eun oo ih 0 ere mle u hn clrmx@oo1 @oo2; i(clr, clr) / rtr amxo @oo1ad@oo2 / eun i f clr n clrSass & Stylus offer even more
  21. 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 TSif, else, for, each, whileProgramming logic applied to CSShttp://thesassway.com/intermediate/if-for-each-while
  22. 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 ESUACEBWorking on a teamEditing the compiled .css fileIncreases room for errorsPotential code bloatChoice?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. 23. NOIT NETTA RUOY ROF NOIT NETTA RUOY ROFUO Y KNAH TUO Y KNAH T

×