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