I attended Jake Smith‘s presentation, “Do more with LESSCSS” at the OpenWest conference. Here are my rough notes.
Why use LESSCSS? Be organized in your CSS code — DRY principle (Do Not Repeat yourself)
What is LESSCSS not?
- doesn’t solve IE or other browser bugs
- doesn’t save you from yourself.
Gives you:
- variables, which are especially useful to help you reference paths or colors or fonts using String interpolation: ‘@{imgPath}divider.png’
- nesting. But don’t nest unless you really need to. Never go more than three levels deep on your nesting because it will bloat out your CSS.
- Normally, @import slows down page load times, but LESSCSS combines all your imports so that it’s a single HTTP GET.
- Hex math to make colors lighter or darker (as for visited links, etc.)
- Mixins — the heart of LESS.
- if/else — called guards. It looks like a media query.
- scope — inherit the closest variable
- namespacing
You can have less.js load and compile your less css. But don’t do it. Use CodeKit (a paid tool) instead to compile it before your browser sees it. It will minify it for you as well. There’s also the “Less App”, which is free. SimpleLESS works on Windows and Mac. And there’s LiveReload, which is a paid app for Linux, Windows and Mac. Or use the command line using Node.js’s nvm, then “lessc myfile.less output.min.css -x”
There’s a LESS compiler for PHP, Ruby, etc., but do not use them — they’re not being kept up-to-date.
LESS vs SASS
SASS has a built-in sprite generator. But Jake generates his own sprites.
LESS is gaining features of SASS, like @extend.
LESS 1.4 will have (will be delivered by the end of the month):
- :extend() functionality
- math must be wrapped in parenthesis
- variables as default variables
- new math functions
- convert function: convert(5em, px)