Download pdf - 2014 WordPress NYC Meetup: Better WordPress Style - Using SASS and LESS CSS In Your WordPress Themes

Be#er%WordPress%Style%Using&SASS&&&LESS&CSS&In&Your&WordPress&Themes&

WordPress%NYC%Meetup,%3/18/2014%Presented&by:&Gabriela%Levit%

[email protected]&@JacarandaTech&hEp://JacarandaTech.com&

BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&18th,&2014&I&Gabriela&Levit&I&JacarandaTech.com&&

Topics&Covered&


! What&is&a&CSS&Preprocessor?&! Why&Use&a&CSS&Preprocessor?&! Common&Preprocessors:&LESS&&&SASS&

! How&They&Work&! Resources&

What&is&a&CSS&Preprocessor?&


CSS&extensions&that&make&it&easier&to&reuse&and&manage&web&site&styles&

Why&use&a&CSS&Preprocessor?&


Support&the&DRY&(Don’t&Repeat&Yourself)&Principle&

How&They&Work&T&Features&


! Language&extensions&such&as&variables,&nesSng,&and&mixins&

! FuncSons&for&manipulaSng&colors&and&other&values&

! Control&DirecSves&&&Expressions&

BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&18th,&2014&I&Gabriela&Levit&I&JacarandaTec.com&&

Popular&Preprocessors:&SASS&&&LESS%


SASS:%SyntacGcally%Awesome%Style%Sheets%

hEp://sassTlang.com/&

LESS:%Leaner%CSS%

hEp://lesscss.org/&

Both are CSS compatible

How&they&work?&Variables&


! Colors&

! Font&Stacks&

! Other&CSS&values&for&reuse&

How&they&work?&Variables&Example&


When&SASS&or&LESS&are&processed,&the&variable’s&values&are&placed&in&the&CSS&wherever&those&variables&are&called.&Output&is&a&valid&CSS&Stylesheet&

SASS Definition Output

How&they&work?&Variables&Example&


LESS&DefiniSon Output&

How&they&work?&NesSng%


You&can&nest&CSS&so&to&follow&the&same&visual&hierarchy&as&your&HTML.&Eg.&Ul,&li,&and&a&are&nested&under&nav:&

ResulSng&CSS&

How&they&work?&Mixins&


Groups%of&CSS&declaraSons&for&reuse&throughout&your&site.&I.e.&“mixTin”&properSes&from&exisSng&styles.&

! Good&for&Vendor&Prefixes&! Slightly&Different&Syntax&in&SASS&&&LESS&

How&they&work?&Mixins&Example&


SASS&

DeclaraSon:&@mixin&direcSve&&&give&it&a&name&Use&(Calling&the&mixin):&@include&followed&by&the&name&of&the&mixin&

Resources&


LESS%Official&Site:&hEp://lesscss.org/&

SASS%Official&Site:&hEp://sassTlang.com/&

Compass&Framework:&hEp://compassTstyle.org/&

LESS%vs%SASS%comparison%hEps://gist.github.com/chriseppstein/674726&

Preprocessors%CodeKit&(Mac&Only):&hEps://incident57.com/codekit/index.html&&

LESS&&&CodeKit&Tutorial&T&Same&approach&works&for&SASS&hEp://code.tutsplus.com/tutorials/usingTcssTpreprocessorsTwithTwordpressTlessTcodekitTTwpT31524&

Koala&(Mac,&Windows&&&Linux):&hEp://koalaTapp.com/&SASS&&&Koala&Tutorial:&hEp://www.wpbeginner.com/wpTtutorials/introducSonTtoTsassTforTnewTwordpressTthemeTdesigners/&

Editors%

Sublime&Text:&hEp://www.sublimetext.com/&

QuesSons&&&Answers&


???&

Thank&You!&☺&


! Steve&Bruner&for&organizing&the&WordPress&NYC&meetup.&

! All&of&you&for&coming!&