Be#er%WordPress%Style%
Using&SASS&&&LESS&CSS&In&Your&WordPress&Themes&
WordPress%NYC%Meetup,%3/18/2014%
Presented&by:&Gabr...
Topics&Covered&
BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&18th,&2014&I&Ga...
What&is&a&CSS&Preprocessor?&
BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&18...
Why&use&a&CSS&Preprocessor?&
BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&18...
How&They&Work&T&Features&
BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&18th,...
Popular&Preprocessors:&SASS&&&LESS%
BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&M...
How&they&work?&Variables&
BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&18th,...
How&they&work?&Variables&Example&
BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&Mar...
How&they&work?&Variables&Example&
BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&Mar...
How&they&work?&NesSng%
BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&18th,&20...
How&they&work?&Mixins&
BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&18th,&20...
How&they&work?&Mixins&Example&
BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&...
Resources&
BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&18th,&2014&I&Gabriel...
QuesSons&&&Answers&
BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&18th,&2014&...
Thank&You!&☺&
BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&18th,&2014&I&Gabr...
Upcoming SlideShare
Loading in …5
×

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

874 views

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
874
On SlideShare
0
From Embeds
0
Number of Embeds
250
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. 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&&
  2. 2. 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&
  3. 3. 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&
  4. 4. 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&
  5. 5. 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&&
  6. 6. 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
  7. 7. 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&
  8. 8. 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
  9. 9. 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&
  10. 10. 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&
  11. 11. 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&
  12. 12. 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&
  13. 13. 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/&
  14. 14. QuesSons&&&Answers& BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&18th,&2014&I&Gabriela&Levit&I&JacarandaTech.com&& ???&
  15. 15. 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!&

×