View
374
Download
2
Category
Preview:
DESCRIPTION
CSS controls the look and formatting of your website, allowing you to give your site a unique look. CSS Preprocessors expand this functionality, making it easier to reuse and manage your CSS code. Both LESS and SASS follow the DRY (Don’t Repeat Yourself) principle and support reusable variables, nested selectors, and functions. Define your style only once; apply to your selectors as needed. Save time and write better, cleaner CSS. Slides from a hands-on presentation on how to create a WordPress theme style sheet with SASS and LESS CSS. As well, creating a SASS & LESS CSS style library to reuse on future projects.
Citation preview
Be#er%WordPress%Style%Using&SASS&&&LESS&CSS&In&Your&WordPress&Themes&
WordPress%NYC%Meetup,%3/18/2014%Presented&by:&Gabriela%Levit%
Glevit@JacarandaTech.com&@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&
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&
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&
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&
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&&
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
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&
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
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&
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&
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&
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&
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/&
QuesSons&&&Answers&
BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&18th,&2014&I&Gabriela&Levit&I&JacarandaTech.com&&
???&
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!&
Recommended