Your SlideShare is downloading. ×
0
LESS is More
LESS is More
LESS is More
LESS is More
LESS is More
LESS is More
LESS is More
LESS is More
LESS is More
LESS is More
LESS is More
LESS is More
LESS is More
LESS is More
LESS is More
LESS is More
LESS is More
LESS is More
LESS is More
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

LESS is More

2,978

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,978
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
32
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×