SlideShare uma empresa Scribd logo
1 de 24
Baixar para ler offline
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
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
?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 data to produce output that is used as input to another
                       program. [...] — Wikipedia ”
” 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)
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
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
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 …
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
”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
}
”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
}
”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
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
& 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;
}
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
& 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
}
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)
}
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
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
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
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 ”
NOIT NETTA RUOY ROF
 NOIT NETTA RUOY ROF
UO Y KNAH T
UO Y KNAH T
An Introduction to CSS Preprocessors

Mais conteúdo relacionado

Semelhante a An Introduction to CSS Preprocessors

Nginx Scripting - Extending Nginx Functionalities with Lua
Nginx Scripting - Extending Nginx Functionalities with LuaNginx Scripting - Extending Nginx Functionalities with Lua
Nginx Scripting - Extending Nginx Functionalities with Lua
Tony Fabeen
 
Devinsampa nginx-scripting
Devinsampa nginx-scriptingDevinsampa nginx-scripting
Devinsampa nginx-scripting
Tony Fabeen
 
Testing Fuse Fabric with Pax Exam
Testing Fuse Fabric with Pax ExamTesting Fuse Fabric with Pax Exam
Testing Fuse Fabric with Pax Exam
Henryk Konsek
 

Semelhante a An Introduction to CSS Preprocessors (20)

JavaFX, because you're worth it
JavaFX, because you're worth itJavaFX, because you're worth it
JavaFX, because you're worth it
 
Nginx Scripting - Extending Nginx Functionalities with Lua
Nginx Scripting - Extending Nginx Functionalities with LuaNginx Scripting - Extending Nginx Functionalities with Lua
Nginx Scripting - Extending Nginx Functionalities with Lua
 
Devinsampa nginx-scripting
Devinsampa nginx-scriptingDevinsampa nginx-scripting
Devinsampa nginx-scripting
 
Using Phing for Fun and Profit
Using Phing for Fun and ProfitUsing Phing for Fun and Profit
Using Phing for Fun and Profit
 
Writing (Meteor) Code With Style
Writing (Meteor) Code With StyleWriting (Meteor) Code With Style
Writing (Meteor) Code With Style
 
Beginner workshop to angularjs presentation at Google
Beginner workshop to angularjs presentation at GoogleBeginner workshop to angularjs presentation at Google
Beginner workshop to angularjs presentation at Google
 
PyLadies Talk: Learn to love the command line!
PyLadies Talk: Learn to love the command line!PyLadies Talk: Learn to love the command line!
PyLadies Talk: Learn to love the command line!
 
Profiling Web Archives IIPC GA 2015
Profiling Web Archives IIPC GA 2015Profiling Web Archives IIPC GA 2015
Profiling Web Archives IIPC GA 2015
 
Automated tests - facts and myths
Automated tests - facts and mythsAutomated tests - facts and myths
Automated tests - facts and myths
 
How Xslate Works
How Xslate WorksHow Xslate Works
How Xslate Works
 
Building modern web apps with html5, javascript, and java
Building modern web apps with html5, javascript, and javaBuilding modern web apps with html5, javascript, and java
Building modern web apps with html5, javascript, and java
 
Awesome Traefik - Ingress Controller for Kubernetes - Swapnasagar Pradhan
Awesome Traefik - Ingress Controller for Kubernetes - Swapnasagar PradhanAwesome Traefik - Ingress Controller for Kubernetes - Swapnasagar Pradhan
Awesome Traefik - Ingress Controller for Kubernetes - Swapnasagar Pradhan
 
Testing Fuse Fabric with Pax Exam
Testing Fuse Fabric with Pax ExamTesting Fuse Fabric with Pax Exam
Testing Fuse Fabric with Pax Exam
 
WordPress in 30 minutes
WordPress in 30 minutesWordPress in 30 minutes
WordPress in 30 minutes
 
GraphQL, l'avenir du REST ?
GraphQL, l'avenir du REST ?GraphQL, l'avenir du REST ?
GraphQL, l'avenir du REST ?
 
Meteor WWNRW Intro
Meteor WWNRW IntroMeteor WWNRW Intro
Meteor WWNRW Intro
 
PhpUnit Best Practices
PhpUnit Best PracticesPhpUnit Best Practices
PhpUnit Best Practices
 
Microservices With Spring Boot and Spring Cloud Netflix
Microservices With Spring Boot and Spring Cloud NetflixMicroservices With Spring Boot and Spring Cloud Netflix
Microservices With Spring Boot and Spring Cloud Netflix
 
Learn Frontend Testing
Learn Frontend TestingLearn Frontend Testing
Learn Frontend Testing
 
Theme Development and Customization
Theme Development and CustomizationTheme Development and Customization
Theme Development and Customization
 

Último

Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
KarakKing
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
heathfieldcps1
 
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
ZurliaSoop
 

Último (20)

Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptxExploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
 
NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...
NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...
NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...
 
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
 
Interdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptxInterdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptx
 
How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...
 
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxHMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
 
Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
 
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdf
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdfUnit 3 Emotional Intelligence and Spiritual Intelligence.pdf
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdf
 
Wellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptxWellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptx
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
Fostering Friendships - Enhancing Social Bonds in the Classroom
Fostering Friendships - Enhancing Social Bonds  in the ClassroomFostering Friendships - Enhancing Social Bonds  in the Classroom
Fostering Friendships - Enhancing Social Bonds in the Classroom
 
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfUGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
 
Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptx
 
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.
 
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
 
SOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning PresentationSOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning Presentation
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibit
 

An Introduction to CSS Preprocessors

  • 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 “
  • 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