This document discusses the CSS preprocessor LESS and its features. LESS allows for nested rules, mixins, variables, imports and operators to make CSS more maintainable. It can be run from Node.js or a browser and compiles LESS files into normal CSS. Key features include mixins for common CSS patterns, variables for consistency, nesting for organization and imports to modularize code. LESS aims to make CSS leaner, meaner and more dynamic through its preprocessing abilities.
20. LESS App
• Compile CSS from LESS file on save
• Ability to Minify
• Reports error line number for failed
compiles
• Growl Notifications
Source: http://incident57.com/less/
21. LESS.js
• 40 times faster than Ruby (gem)
• Caches generated CSS to local storage
(newer browsers only)
23. Live Watch
• Only do this in development environment!
<script type="text/javascript" charset="utf-8">
less.env = "development";
less.watch();
</script>
Source: http://fadeyev.net/2010/06/19/lessjs-will-obsolete-css/
35. Nest for need
// Unecessary Nesting // Outputs
.wrapper { .wrapper section.page .container aside a {
section.page { display: block;
.container { font-size: 0.9em;
aside { padding: 3px;
width: 440px; text-decoration: none;
a { }
display: block;
font-size: 0.9em; // Could easily and more efficiently be
padding: 3px; aside a {
text-decoration: none; display: block;
} font-size: 0.9em;
} padding: 3px;
} text-decoration: none;
} }
}
36. Gotchas!
• LESS.app is not always using the latest
version of LESS.js
• LESS.js is still officially BETA
• Only caches output when live, not local
machine (text/less only)
• Chrome local development is broken