LESS is More
-
Upload
jsmith92 -
Category
Technology
-
view
2.941 -
download
0
description
Transcript of LESS is More
![Page 1: LESS is More](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c78b674a7959a4108b4581/html5/thumbnails/1.jpg)
LESS is MoreAugust 21, 2010 - Barcamp Dallas
Jake Smith
![Page 2: LESS is More](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c78b674a7959a4108b4581/html5/thumbnails/2.jpg)
What is LESS?
• Dynamic CSS
• Leaner/Meaner CSS
![Page 3: LESS is More](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c78b674a7959a4108b4581/html5/thumbnails/3.jpg)
Other Types of LESS
• SASS (Ruby)
• http://sass-lang.com/
• Scaffold (PHP)
• http://github.com/anthonyshort/Scaffold
![Page 4: LESS is More](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c78b674a7959a4108b4581/html5/thumbnails/4.jpg)
Variables
@base_red: #e20d15;@base_blue: #0067b0;@default_gap: 10px;
![Page 5: LESS is More](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c78b674a7959a4108b4581/html5/thumbnails/5.jpg)
Importing
@import ‘reset’;@import ‘global.css’;
![Page 6: LESS is More](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c78b674a7959a4108b4581/html5/thumbnails/6.jpg)
Comments
/* Default CSS Comment */// Easier Commenting!
![Page 7: LESS is More](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c78b674a7959a4108b4581/html5/thumbnails/7.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 { } } } .sidebar { width: 250px; .float_right; .module; }}
![Page 8: LESS is More](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c78b674a7959a4108b4581/html5/thumbnails/8.jpg)
Nested Rules (Links)
a { color: #F00; text-decoration: none; :hover { color: #999; } :active { color: #666; } :visited { text-decoration: underline; }}
![Page 9: LESS is More](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c78b674a7959a4108b4581/html5/thumbnails/9.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 10: LESS is More](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c78b674a7959a4108b4581/html5/thumbnails/10.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 11: LESS is More](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c78b674a7959a4108b4581/html5/thumbnails/11.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 12: LESS is More](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c78b674a7959a4108b4581/html5/thumbnails/12.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 13: LESS is More](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c78b674a7959a4108b4581/html5/thumbnails/13.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 14: LESS is More](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c78b674a7959a4108b4581/html5/thumbnails/14.jpg)
LESS.js
• 40 times faster than Ruby (gem)
• Caches generated CSS to local storage (newer browsers only)
![Page 15: LESS is More](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c78b674a7959a4108b4581/html5/thumbnails/15.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 16: LESS is More](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c78b674a7959a4108b4581/html5/thumbnails/16.jpg)
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
![Page 17: LESS is More](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c78b674a7959a4108b4581/html5/thumbnails/17.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 18: LESS is More](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c78b674a7959a4108b4581/html5/thumbnails/18.jpg)
Questions? Concerns? Complaints?
![Page 19: LESS is More](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c78b674a7959a4108b4581/html5/thumbnails/19.jpg)
Thanks for listening!Contact Information[t]: @jakefolio[e]: [email protected][w]: http://www.jakefolio.com[irc]: #dallasphp