Your SlideShare is downloading. ×
0
LESS is More
August 21, 2010 - Barcamp Dallas
           Jake Smith
What is LESS?


• Dynamic CSS
• Leaner/Meaner CSS
Other Types of LESS

• SASS (Ruby)
 • http://sass-lang.com/
• Scaffold (PHP)
 • http://github.com/anthonyshort/Scaffold
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;
        bo...
Nested Rules (Links)

 a {
       color: #F00;
       text-decoration: none;
       :hover { color: #999; }
       :active...
Mixins
.float_left {
    display: inline;
    float: left;
}
.float_right {
    display: inline;
    float: right;
}
.head...
Operators
@the-border: 1px;
@base-color: #111;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-r...
Namespacing
#bundle {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    :hover ...
Scope Variables
@default_color: #FFF; // Global Variable
#bundle {
    @default_color: #000; // Scope Variable
  .button {...
LESS App

• Compile CSS from LESS file on save
• Ability to Minify
• Reports error line number for failed
  compiles
• Grow...
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.goo...
Gotchas!

• @media queries can not be compiled, due
  to variable naming conflict
• Can not use CSS transitions (webkit onl...
Resource Links
•   http://fadeyev.net/2010/06/19/lessjs-will-obsolete-
    css/

•   http://lesscss.org/docs

•   http://n...
Questions? Concerns? Complaints?
Thanks for listening!
Contact Information
[t]: @jakefolio
[e]: me@jakefolio.com
[w]: http://www.jakefolio.com
[irc]: #dall...
Upcoming SlideShare
Loading in...5
×

LESS is More

2,984

Published on

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

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

No notes for slide

Transcript of "LESS is More"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×