doing more with less
DESCRIPTION
LESS is a flexible and dynamic way to develop CSS. A developer can quickly utilize CSS3 features, including browser specific implementations, with little effort. LESS is what everyone dreamed CSS could be. With such things as variables, mixins, nested rules and operations. He will show you how to use LESS to make your development process faster and more efficient.TRANSCRIPT
Doing more with LESSDecember 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
<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/
Live Watch
• Only do this in development environment!
<script type="text/javascript" charset="utf-8"> less.env = "development"; less.watch();</script>
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;}
// Outputh1{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 beaside 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