LeSS in action

2,741 views

Published on

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,741
On SlideShare
0
From Embeds
0
Number of Embeds
889
Actions
Shares
0
Downloads
57
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

LeSS in action

  1. 1. LeSS in Actionfahai@taobao.com
  2. 2. What the …• The dynamic stylesheet language• LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (IE 6+, Webkit, Firefox) and server-side, with Node.js.
  3. 3. Features
  4. 4. Variables• @nice-blue: #5B83AD;• @light-blue: @nice-blue + #111;• #header { color: @light-blue; }• @fnord: "I am fnord.";• @var: fnord;• content: @@var;
  5. 5. Mixins• .border-radius (@radius) {• border-radius: @radius;• -moz-border-radius: @radius;• -webkit-border-radius: @radius;• }• #header {• .border-radius(4px);• }• .button {• .border-radius(6px);• }
  6. 6. Nesting• #header {• color: black;• .navigation {• font-size: 12px;• }• .logo {• width: 300px;• &:hover { text-decoration: none }• }• }
  7. 7. Operations• @base: 5%;• @filler: @base * 2;• @other: @base + @filler;• color: #888 / 4;• background-color: @base-color + #111;• height: 100% / 2 + @filler;
  8. 8. Color functions• @base: #f04615;• .class {• color: saturate(@base, 5%);• background-color: lighten(spin(@base, 8), 25%);• }
  9. 9. Namespaces• #bundle {• .button () {• display: block;• border: 1px solid black;• background-color: grey;• }• .tab { ... }• .citation { ... }• }• #header a {• color: orange;• #bundle > .button;• }
  10. 10. Scope• @var: red;• #page {• @var: white;• #header {• color: @var; // white• }• }• #footer {• color: @var; // red• }
  11. 11. Importing• @import "lib.less";• @import "lib";
  12. 12. Escaping• .class {• filter: ~"progid:DXImageTransform.Micro soft.AlphaImageLoader(src=imag e.png)";• }
  13. 13. Usage
  14. 14. Client-side• Link your .less stylesheets with the rel set to “stylesheet/less”:• <link rel="stylesheet/less" type="text/css" href="styles.less">• Then download less.js from the top of the page, and include it in the <head> element of your page, like so:• <script src="less.js" type="text/javascript"></script>
  15. 15. Server-side• Once installed, you can invoke the compiler from node, as such:• var less = require(less);• less.render(.class { width: 1 + 1 }, function (e, css) {• console.log(css);• });
  16. 16. Local CMD• Less comes with a binary, which lets you invoke the compiler from the command-line, as such:• $ lessc styles.less
  17. 17. Practice
  18. 18. Overview
  19. 19. lib.less
  20. 20. example.less
  21. 21. More …• Server-side dynamic compilation• Server-side static deployment• Client-side compilation with lazyload• …
  22. 22. Reference• http://www.lesscss.org/
  23. 23. Q & A & Thx

×