Doing more with LESS December 14, 2010 - DallasPHP Jake Smith http://joind.in/talk/view/2478 

What is LESS? • Dynamic CSS • CSS pre-processor • Leaner/Meaner CSS • Minified CSS (optional) 

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

SASS vs. LESS • Not as native syntax (css) as LESS • SASS mimics ruby • SASS.js under development now • In the end it’s all about preference 

LESS Features 

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

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 

Rule Sets #defaults { @width: 960px; @color: #333; } #darkTheme { @color: #FFF; } .article { color: #294366; } .comment { width: #defaults[@width]; color: .article['color']; } 

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 

Built-in Mixins • saturate(color, amount) • desaturate(color, amount) • lighten(color, amount) • darken(color, amount) • greyscale(color, amount) 

LESS Development 

• Install node.js • Install NPM (Node Package Manager) • Install LESS Environment *nix/OSX 

Environment Windows • http://blog.dotsmart.net/2010/11/26/ running-the-less-js-command-line-compiler- on-windows/ • lessc screen.less [output.css] [-compress] 

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 Source: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-you-need-to-check-out-less-js/ 

Live Watch • Only do this in development environment! less.env = "development"; less.watch(); Source: http://fadeyev.net/2010/06/19/lessjs-will-obsolete-css/ 

TextMate Bundle • Syntax Highlighting • On Save, produces parsed CSS • https://github.com/appden/less.tmbundle 

LESS Examples 

Mixins 

Rounded .roundedExpanded(@radius: 3px, @tl: 0, @tr: 0, @br: 0, @bl: 0) { // Webkit -webkit-border-top-right-radius: @radius + @tr; -webkit-border-top-left-radius: @radius + @tl; -webkit-border-bottom-right-radius: @radius + @br; -webkit-border-bottom-left-radius: @radius + @bl; // Firefox -moz-border-radius-topleft: @radius + @tl; -moz-border-radius-topright: @radius + @tr; -moz-border-radius-bottomright: @radius + @br; -moz-border-radius-bottomleft: @radius + @bl; // Implemented Standard border-top-right-radius: @radius + @tr; border-top-left-radius: @radius + @tl; border-bottom-right: @radius + @br; border-bottom-left: @radius + @bl; } // Basic Rounded Corner .rounded(@radius: 3px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } 

Gradient .gradient (@start: #ffffff, @end: #EDEDED){ background: @start; background: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end)); background: -moz-linear-gradient(-90deg, @start, @end); filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr=%d, endColorstr=%d)", @start, @end); /* IE6 & 7 */ -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr=%d, endColorstr=%d)", @start, @end); /* IE8 */ } 

Shadow .shadow(@x: 3px, @y: 3px, @blur: 5px, @color: #333) { box-shadow: @x @y @blur @color; -moz-box-shadow: @x @y @blur @color; -webkit-box-shadow: @x @y @blur @color; } 

Import (include) @import 'css3'; @import 'buttons'; @import 'theme'; @import 'reset'; 

Operators @base_font: 24px; @base_color: #5b8cff; h1 { color: @base_color; font-size: @base_font; } h2 { color: @base_color - #333; font-size: @base_font * 0.8; } h3 { color: @base_color + #333; font-size: @base_font * 0.7; } h4 { color: @base_color + #666; font-size: @base_font * 0.6; } // Output h1{color:#5b8cff;font-size:24px;} h2{color:#2859cc;font-size:19.200000000000003px;} h3{color:#8ebfff;font-size:16.799999999999997px;} h4{color:#c1f2ff;font-size:14.399999999999999px;} 

Grid Layout @unit: @pageWidth / 24; // Grid Margin @gm: 10px; .g(@u: 20px, @margin: @gm, @marginTop: 0, @marginBottom: 0) { // Scope Variables .gpadding: @gpadding + 0; .gborder: @gborder + 0; display: inline; float: left; margin: @marginTop @margin @marginBottom @margin; width: (@u * @unit) - ((@margin * 2) + @gpadding + @gborder); } .shift(@pu: -20px){ left: @pu * @unit; position: relative; } .newRow { clear: left; } Source: http://net.tutsplus.com/tutorials/php/how-to-squeeze-the-most-out-of-less/ 

Grid Layout Cont. h1 { .gpadding: 6; .g(6); .header(); } #site-navigation { padding: 0; .g(18, 0); li { background: @color2; padding: @gm / 2; @gpadding: @gm; .g(3, @gm, @gm); &.selected { background: @color4; } } a { color: #FFF; text-decoration: none; } } Source: http://net.tutsplus.com/tutorials/php/how-to-squeeze-the-most-out-of-less/ 

With Great Power Comes Great Responsibility 

Nest for need // Unecessary Nesting .wrapper { section.page { .container { aside { width: 440px; a { display: block; font-size: 0.9em; padding: 3px; text-decoration: none; } } } } } // Outputs .wrapper section.page .container aside a { display: block; font-size: 0.9em; padding: 3px; text-decoration: none; } // Could easily and more efficiently be aside a { display: block; font-size: 0.9em; padding: 3px; text-decoration: none; } 

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 

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]: [email protected] [w]: http://www.jakefolio.com [irc]: #dallasphp