Jake Smith gave a presentation on LESS, a dynamic CSS language that allows variables, mixins, nesting, and other features to make CSS more maintainable. LESS compiles to regular CSS and can be used with the LESS.js library in browsers or a LESS compiler. Some key features of LESS discussed include variables, imports, nesting rules, mixins, and namespacing. Gotchas with LESS include limitations with media queries and transitions.

1. LESS is More
August 21, 2010 - Barcamp Dallas
Jake Smith

2. What is LESS?
• Dynamic CSS
• Leaner/Meaner CSS

3. Other Types of LESS
• SASS (Ruby)
• http://sass-lang.com/
• Scaffold (PHP)
• http://github.com/anthonyshort/Scaffold

4. Variables
@base_red: #e20d15;
@base_blue: #0067b0;
@default_gap: 10px;

5. Importing
@import ‘reset’;
@import ‘global.css’;

6. Comments
/* Default CSS Comment */
// Easier Commenting!

7. Nested Rules
.main {
background: #F7F7F7;
padding-bottom: 20px;
.module {
background: #FFF;
border: 1px #CCC solid;
padding: 10px;
}
.content {
width: 650px;
.float_left;
.module;
.shadow(2px, 2px, 10px, #666);
.rounded(10px);
.title {
background: @base_red;
border-bottom: 1px @base_red solid;
font-weight: bold;
margin-bottom: 1px;
padding: 5px;
.comments {
}
}
}
.sidebar {
width: 250px;
.float_right;
.module;
}
}

8. Nested Rules (Links)
a {
color: #F00;
text-decoration: none;
:hover { color: #999; }
:active { color: #666; }
:visited { text-decoration: underline; }
}

9. Mixins
.float_left {
display: inline;
float: left;
}
.float_right {
display: inline;
float: right;
}
.header {
background: #f7f7f7;
border-top: 3px @base_red solid;
padding: 15px 0;
.logo {
.float_left;
}
.navigation {
.float_right;
}
}

10. Operators
@the-border: 1px;
@base-color: #111;
#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}
#footer {
color: (@base-color + #111) * 1.5;
}
Source: http://lesscss.org/

11. Namespacing
#bundle {
.button {
display: block;
border: 1px solid black;
background-color: grey;
:hover { background-color: white }
}
.tab { ... }
.citation { ... }
}
#header a {
color: orange;
#bundle > .button;
}
Source: http://lesscss.org/docs

12. Scope Variables
@default_color: #FFF; // Global Variable
#bundle {
@default_color: #000; // Scope Variable
.button {
display: block;
border: 1px solid black;
background-color: grey;
:hover { background-color: white }
}
.tab { ... }
.citation { ... }
}
#header a {
color: orange;
#bundle > .button;
}
Source: http://lesscss.org/docs

13. 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/

14. LESS.js
• 40 times faster than Ruby (gem)
• Caches generated CSS to local storage
(newer browsers only)

15. LESS.js Code
<link rel="stylesheet/less" href="/stylesheets/main.less" type="text/css" />
<script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js" />
Source: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-you-need-to-check-out-less-js/

16. Gotchas!
• @media queries can not be compiled, due
to variable naming conflict
• Can not use CSS transitions (webkit only,
future Firefox versions)
• LESS.js is still officially BETA

17. Resource Links
• http://fadeyev.net/2010/06/19/lessjs-will-obsolete-
css/
• http://lesscss.org/docs
• http://net.tutsplus.com/tutorials/html-css-
techniques/quick-tip-you-need-to-check-out-less-
js/
• http://incident57.com/less/

18. Questions? Concerns? Complaints?

19. Thanks for listening!
Contact Information
[t]: @jakefolio
[e]: me@jakefolio.com
[w]: http://www.jakefolio.com
[irc]: #dallasphp