LESS is More

LESS is More August 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 ﬁle on save • Ability to Minify • Reports error line number for failed compiles • Growl Notiﬁcations 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 conﬂict • Can not use CSS transitions (webkit only, future Firefox versions) • LESS.js is still ofﬁcially 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-lessjs/ • 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

http://dallasphp.org	344
http://webcache.googleusercontent.com	3
http://web.archive.org	2

LESS is More

by jsmith92 on Aug 30, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 349

Statistics

LESS is More — Presentation Transcript