Live Blogging: Use LESS Do More: Getting Started with a CSS Preprocesser

Speaker: 
Teresa Rosche Ott
Twitter: @thesimplerweb
Speaker Slides: http://thesimplerweb.com/less

  • Great tool – css2less.com
  • use a compiler to turn it all into CSS
  • @import ready-made libraries of goodness
  • two types – less or sass.
    • LESS
      • better for people that just dabble in CSS
      • relatively simple language
      • easier initial setup than sass
      • power to spare for the average WordPress project
      • can run on the server
      • virtually everything you learn to do with less can be used with sass
    • SASS
      • better for programmers
      • can use compass – a robust & well maintained and updated library of SASS goodies
      • Initial setup can be a pain for non-developers
      • Programmatically more powerful than LESS: Can use logical comparisons to set styles
      • Has features that enable compiled stylesheets to be more concise
  • 3 simple ways to start using LESS now
    • use variables to keep colors & fonts consistent & easy to change
    • color operations – great for darkening/lightening colors
    • mixins
  • Using LESS with WordPress themes
    • create a “less” subfolder in the theme directory
    • duplicate the theme’s style sheet. move the copy into the /less directory & rename it from style.css to style.less
    • launch your compiler; set it to watch the /less directory you created
    • set it to save the compiled CSS to the theme directory, which will overwrite style.css
    • open the style.less file; import any LESS libraries you like: @import “bootstrap”;
    • Walk through your newly created style.less file & find repetitive & inefficient language to replace with LESS
    • Save & Compile
    • Upload the revised/new style.css – no need to upload the LESS files