Day 4: Less

On Day 4, I try out Less.

Less is a CSS preprocessor that lets you structure your CSS in a sane way that mirrors your HTML. It also gives you a lot of useful constructs like variables and mixins that lets you write much more modular stylesheets. Less and Sass (also SCSS) are the two big CSS preprocessors, and today I give the first a shot.

I wanted to run through the main differences between Less and SCSS, so I'd have a point of comparison when I do SCSS later. I ran the Less compiler from the command line a few times, and started using SimpLESS to autocompile after that.

Things I covered :

  • Variables
  • Mixings
  • Color modifier methods
  • Media queries
  • Overriding Bootstrap's default variables using Less

Resources

  • http://lesscss.org/
  • http://wearekiss.com/simpless
  • http://www.helloerik.com/bootstrap-3-less-workflow-tutorial
  • http://stackoverflow.com/questions/16350779/bootstrap-variable-overriding-with-less