2014 WordPress NYC Meetup: Better WordPress Style - Using SASS and LESS CSS In Your WordPress Themes
-
Upload
gabriela-levit -
Category
Technology
-
view
375 -
download
2
description
Transcript of 2014 WordPress NYC Meetup: Better WordPress Style - Using SASS and LESS CSS In Your WordPress Themes
![Page 1: 2014 WordPress NYC Meetup: Better WordPress Style - Using SASS and LESS CSS In Your WordPress Themes](https://reader033.fdocuments.us/reader033/viewer/2022052410/554beb25b4c9056b348b4f81/html5/thumbnails/1.jpg)
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&&
![Page 2: 2014 WordPress NYC Meetup: Better WordPress Style - Using SASS and LESS CSS In Your WordPress Themes](https://reader033.fdocuments.us/reader033/viewer/2022052410/554beb25b4c9056b348b4f81/html5/thumbnails/2.jpg)
Topics&Covered&
BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&18th,&2014&I&Gabriela&Levit&I&JacarandaTech.com&&
! What&is&a&CSS&Preprocessor?&! Why&Use&a&CSS&Preprocessor?&! Common&Preprocessors:&LESS&&&SASS&
! How&They&Work&! Resources&
![Page 3: 2014 WordPress NYC Meetup: Better WordPress Style - Using SASS and LESS CSS In Your WordPress Themes](https://reader033.fdocuments.us/reader033/viewer/2022052410/554beb25b4c9056b348b4f81/html5/thumbnails/3.jpg)
What&is&a&CSS&Preprocessor?&
BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&18th,&2014&I&Gabriela&Levit&I&JacarandaTech.com&&
CSS&extensions&that&make&it&easier&to&reuse&and&manage&web&site&styles&
![Page 4: 2014 WordPress NYC Meetup: Better WordPress Style - Using SASS and LESS CSS In Your WordPress Themes](https://reader033.fdocuments.us/reader033/viewer/2022052410/554beb25b4c9056b348b4f81/html5/thumbnails/4.jpg)
Why&use&a&CSS&Preprocessor?&
BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&18th,&2014&I&Gabriela&Levit&I&JacarandaTech.com&&
Support&the&DRY&(Don’t&Repeat&Yourself)&Principle&
![Page 5: 2014 WordPress NYC Meetup: Better WordPress Style - Using SASS and LESS CSS In Your WordPress Themes](https://reader033.fdocuments.us/reader033/viewer/2022052410/554beb25b4c9056b348b4f81/html5/thumbnails/5.jpg)
How&They&Work&T&Features&
BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&18th,&2014&I&Gabriela&Levit&I&JacarandaTech.com&&
! 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&&
![Page 6: 2014 WordPress NYC Meetup: Better WordPress Style - Using SASS and LESS CSS In Your WordPress Themes](https://reader033.fdocuments.us/reader033/viewer/2022052410/554beb25b4c9056b348b4f81/html5/thumbnails/6.jpg)
Popular&Preprocessors:&SASS&&&LESS%
BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&18th,&2014&I&Gabriela&Levit&I&JacarandaTech.com&&
SASS:%SyntacGcally%Awesome%Style%Sheets%
hEp://sassTlang.com/&
LESS:%Leaner%CSS%
hEp://lesscss.org/&
Both are CSS compatible
![Page 7: 2014 WordPress NYC Meetup: Better WordPress Style - Using SASS and LESS CSS In Your WordPress Themes](https://reader033.fdocuments.us/reader033/viewer/2022052410/554beb25b4c9056b348b4f81/html5/thumbnails/7.jpg)
How&they&work?&Variables&
BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&18th,&2014&I&Gabriela&Levit&I&JacarandaTech.com&&
! Colors&
! Font&Stacks&
! Other&CSS&values&for&reuse&
![Page 8: 2014 WordPress NYC Meetup: Better WordPress Style - Using SASS and LESS CSS In Your WordPress Themes](https://reader033.fdocuments.us/reader033/viewer/2022052410/554beb25b4c9056b348b4f81/html5/thumbnails/8.jpg)
How&they&work?&Variables&Example&
BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&18th,&2014&I&Gabriela&Levit&I&JacarandaTech.com&&
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
![Page 9: 2014 WordPress NYC Meetup: Better WordPress Style - Using SASS and LESS CSS In Your WordPress Themes](https://reader033.fdocuments.us/reader033/viewer/2022052410/554beb25b4c9056b348b4f81/html5/thumbnails/9.jpg)
How&they&work?&Variables&Example&
BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&18th,&2014&I&Gabriela&Levit&I&JacarandaTech.com&&
LESS&DefiniSon Output&
![Page 10: 2014 WordPress NYC Meetup: Better WordPress Style - Using SASS and LESS CSS In Your WordPress Themes](https://reader033.fdocuments.us/reader033/viewer/2022052410/554beb25b4c9056b348b4f81/html5/thumbnails/10.jpg)
How&they&work?&NesSng%
BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&18th,&2014&I&Gabriela&Levit&I&JacarandaTech.com&&
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&
![Page 11: 2014 WordPress NYC Meetup: Better WordPress Style - Using SASS and LESS CSS In Your WordPress Themes](https://reader033.fdocuments.us/reader033/viewer/2022052410/554beb25b4c9056b348b4f81/html5/thumbnails/11.jpg)
How&they&work?&Mixins&
BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&18th,&2014&I&Gabriela&Levit&I&JacarandaTech.com&&
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&
![Page 12: 2014 WordPress NYC Meetup: Better WordPress Style - Using SASS and LESS CSS In Your WordPress Themes](https://reader033.fdocuments.us/reader033/viewer/2022052410/554beb25b4c9056b348b4f81/html5/thumbnails/12.jpg)
How&they&work?&Mixins&Example&
BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&18th,&2014&I&Gabriela&Levit&I&JacarandaTech.com&&
SASS&
DeclaraSon:&@mixin&direcSve&&&give&it&a&name&Use&(Calling&the&mixin):&@include&followed&by&the&name&of&the&mixin&
![Page 13: 2014 WordPress NYC Meetup: Better WordPress Style - Using SASS and LESS CSS In Your WordPress Themes](https://reader033.fdocuments.us/reader033/viewer/2022052410/554beb25b4c9056b348b4f81/html5/thumbnails/13.jpg)
Resources&
BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&18th,&2014&I&Gabriela&Levit&I&JacarandaTech.com&&
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/&
![Page 14: 2014 WordPress NYC Meetup: Better WordPress Style - Using SASS and LESS CSS In Your WordPress Themes](https://reader033.fdocuments.us/reader033/viewer/2022052410/554beb25b4c9056b348b4f81/html5/thumbnails/14.jpg)
QuesSons&&&Answers&
BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&18th,&2014&I&Gabriela&Levit&I&JacarandaTech.com&&
???&
![Page 15: 2014 WordPress NYC Meetup: Better WordPress Style - Using SASS and LESS CSS In Your WordPress Themes](https://reader033.fdocuments.us/reader033/viewer/2022052410/554beb25b4c9056b348b4f81/html5/thumbnails/15.jpg)
Thank&You!&☺&
BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&18th,&2014&I&Gabriela&Levit&I&JacarandaTech.com&&
! Steve&Bruner&for&organizing&the&WordPress&NYC&meetup.&
! All&of&you&for&coming!&