LESS is MoreAugust 21, 2010 - Barcamp Dallas

Jake Smith

What is LESS?

• Dynamic CSS

• Leaner/Meaner CSS

Other Types of LESS

• SASS (Ruby)

• http://sass-lang.com/

• Scaffold (PHP)

• http://github.com/anthonyshort/Scaffold

Variables

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

Importing

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

Comments

/* Default CSS Comment */// Easier Commenting!

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; }}

Nested Rules (Links)

a { color: #F00; text-decoration: none; :hover { color: #999; } :active { color: #666; } :visited { text-decoration: underline; }}

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; }}

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/

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

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

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/

LESS.js

• 40 times faster than Ruby (gem)

• Caches generated CSS to local storage (newer browsers only)

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/

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

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/

Questions? Concerns? Complaints?

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