• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
LESS is More
 

LESS is More

on

  • 3,174 views

 

Statistics

Views

Total Views
3,174
Views on SlideShare
2,821
Embed Views
353

Actions

Likes
1
Downloads
28
Comments
0

3 Embeds 353

http://dallasphp.org 344
http://web.archive.org 6
http://webcache.googleusercontent.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    LESS is More LESS is More Presentation Transcript

    • 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; 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; } }
    • 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
    • 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
    • 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/
    • 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
    • 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]: me@jakefolio.com [w]: http://www.jakefolio.com [irc]: #dallasphp