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
![Page 1: Doing more with LESS](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54c78b8c4a79591f0a8b459a/html5/thumbnails/1.jpg)
Doing more with LESSDecember 14, 2010 - DallasPHP
Jake Smith
http://joind.in/talk/view/2478
![Page 2: Doing more with LESS](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54c78b8c4a79591f0a8b459a/html5/thumbnails/2.jpg)
What is LESS?
• Dynamic CSS
• CSS pre-processor
• Leaner/Meaner CSS
• Minified CSS (optional)
![Page 3: Doing more with LESS](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54c78b8c4a79591f0a8b459a/html5/thumbnails/3.jpg)
Other Types of LESS
• SASS (Ruby)
• http://sass-lang.com/
• Scaffold (PHP)
• http://github.com/anthonyshort/Scaffold
• LESSPHP
• http://leafo.net/lessphp/
![Page 4: Doing more with LESS](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54c78b8c4a79591f0a8b459a/html5/thumbnails/4.jpg)
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
![Page 5: Doing more with LESS](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54c78b8c4a79591f0a8b459a/html5/thumbnails/5.jpg)
LESS Features
![Page 6: Doing more with LESS](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54c78b8c4a79591f0a8b459a/html5/thumbnails/6.jpg)
Variables
@base_red: #e20d15;@base_blue: #0067b0;@default_gap: 10px;
![Page 7: Doing more with LESS](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54c78b8c4a79591f0a8b459a/html5/thumbnails/7.jpg)
Importing
@import ‘reset’;@import ‘global.css’;
![Page 8: Doing more with LESS](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54c78b8c4a79591f0a8b459a/html5/thumbnails/8.jpg)
Comments
/* Default CSS Comment */// Easier Commenting!
![Page 9: Doing more with LESS](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54c78b8c4a79591f0a8b459a/html5/thumbnails/9.jpg)
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 { } } }}
![Page 10: Doing more with LESS](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54c78b8c4a79591f0a8b459a/html5/thumbnails/10.jpg)
Nested Rules (Links)
a { color: #F00; text-decoration: none; &:hover { color: #999; } &:active { color: #666; } &:visited { text-decoration: underline; }}
![Page 11: Doing more with LESS](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54c78b8c4a79591f0a8b459a/html5/thumbnails/11.jpg)
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; }}
![Page 12: Doing more with LESS](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54c78b8c4a79591f0a8b459a/html5/thumbnails/12.jpg)
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/
![Page 13: Doing more with LESS](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54c78b8c4a79591f0a8b459a/html5/thumbnails/13.jpg)
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
![Page 14: Doing more with LESS](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54c78b8c4a79591f0a8b459a/html5/thumbnails/14.jpg)
Rule Sets#defaults { @width: 960px; @color: #333;}
#darkTheme { @color: #FFF;}
.article { color: #294366; }
.comment { width: #defaults[@width]; color: .article['color']; }
![Page 15: Doing more with LESS](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54c78b8c4a79591f0a8b459a/html5/thumbnails/15.jpg)
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
![Page 16: Doing more with LESS](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54c78b8c4a79591f0a8b459a/html5/thumbnails/16.jpg)
Built-in Mixins
• saturate(color, amount)
• desaturate(color, amount)
• lighten(color, amount)
• darken(color, amount)
• greyscale(color, amount)
![Page 17: Doing more with LESS](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54c78b8c4a79591f0a8b459a/html5/thumbnails/17.jpg)
LESS Development
![Page 18: Doing more with LESS](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54c78b8c4a79591f0a8b459a/html5/thumbnails/18.jpg)
• Install node.js
• Install NPM (Node Package Manager)
• Install LESS
Environment *nix/OSX
![Page 19: Doing more with LESS](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54c78b8c4a79591f0a8b459a/html5/thumbnails/19.jpg)
Environment Windows
• http://blog.dotsmart.net/2010/11/26/running-the-less-js-command-line-compiler-on-windows/
• lessc screen.less [output.css] [-compress]
![Page 20: Doing more with LESS](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54c78b8c4a79591f0a8b459a/html5/thumbnails/20.jpg)
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/
![Page 21: Doing more with LESS](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54c78b8c4a79591f0a8b459a/html5/thumbnails/21.jpg)
LESS.js
• 40 times faster than Ruby (gem)
• Caches generated CSS to local storage (newer browsers only)
![Page 22: Doing more with LESS](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54c78b8c4a79591f0a8b459a/html5/thumbnails/22.jpg)
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/
![Page 23: Doing more with LESS](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54c78b8c4a79591f0a8b459a/html5/thumbnails/23.jpg)
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/
![Page 24: Doing more with LESS](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54c78b8c4a79591f0a8b459a/html5/thumbnails/24.jpg)
TextMate Bundle
• Syntax Highlighting
• On Save, produces parsed CSS
• https://github.com/appden/less.tmbundle
![Page 25: Doing more with LESS](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54c78b8c4a79591f0a8b459a/html5/thumbnails/25.jpg)
LESS Examples
![Page 26: Doing more with LESS](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54c78b8c4a79591f0a8b459a/html5/thumbnails/26.jpg)
Mixins
![Page 27: Doing more with LESS](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54c78b8c4a79591f0a8b459a/html5/thumbnails/27.jpg)
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;}
![Page 28: Doing more with LESS](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54c78b8c4a79591f0a8b459a/html5/thumbnails/28.jpg)
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 */}
![Page 29: Doing more with LESS](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54c78b8c4a79591f0a8b459a/html5/thumbnails/29.jpg)
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;}
![Page 30: Doing more with LESS](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54c78b8c4a79591f0a8b459a/html5/thumbnails/30.jpg)
Import (include)
@import 'css3';@import 'buttons';@import 'theme';@import 'reset';
![Page 31: Doing more with LESS](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54c78b8c4a79591f0a8b459a/html5/thumbnails/31.jpg)
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;}
![Page 32: Doing more with LESS](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54c78b8c4a79591f0a8b459a/html5/thumbnails/32.jpg)
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/
![Page 33: Doing more with LESS](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54c78b8c4a79591f0a8b459a/html5/thumbnails/33.jpg)
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/
![Page 34: Doing more with LESS](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54c78b8c4a79591f0a8b459a/html5/thumbnails/34.jpg)
With Great Power Comes Great Responsibility
![Page 35: Doing more with LESS](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54c78b8c4a79591f0a8b459a/html5/thumbnails/35.jpg)
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;}
![Page 36: Doing more with LESS](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54c78b8c4a79591f0a8b459a/html5/thumbnails/36.jpg)
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
![Page 37: Doing more with LESS](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54c78b8c4a79591f0a8b459a/html5/thumbnails/37.jpg)
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/
![Page 38: Doing more with LESS](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54c78b8c4a79591f0a8b459a/html5/thumbnails/38.jpg)
Questions? Concerns? Complaints?
![Page 39: Doing more with LESS](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54c78b8c4a79591f0a8b459a/html5/thumbnails/39.jpg)
Thanks for listening!Contact Information[t]: @jakefolio[e]: [email protected][w]: http://www.jakefolio.com[irc]: #dallasphp