.less - CSS doneright!<br />Daniel Hölbling<br />http://www.tigraine.at<br />http://www.dotlesscss.com<br />
WHAT is CSS?<br />Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (that...
Howwe do use CSS<br />CSS Zen Garden<br />Markup iscompletelydecoupled<br />Drasticallychangesthelayoutofthepage. <br />Ma...
CSS Zen Garden<br />Good CSS lookslikethis:<br />
CSS Zen Garden<br />Good CSS lookslikethis:<br />Redundant! DRY-Violation<br />
Multiple Classes<br />CSS looksgood<br />Markup not so much:<br />
CSS alwayssucks!<br />
LessCss<br />A revolutionary Ruby Framework to fix CSS<br />http://lesscss.org<br />
Variables<br />LESS<br />CSS<br />
Operations<br />LESS<br />CSS<br />
Mixins<br />LESS<br />CSS<br />
Nestedrules<br />LESS<br />CSS<br />
dotless<br />.NET Port ofLessCss<br />Started in July<br />Foundedby:<br />Erik van Brakel<br />Chris John Owen<br />Danie...
Features<br />CompleteLess Syntax<br />Transparent Lesscompilation<br />(Through HttpHandler)<br />Console Compiler<br />T...
Demo<br />
Thanksforlistening!<br />More info: http://www.dotlesscss.com<br />My Blog:http://www.tigraine.at<br />
Upcoming SlideShare
Loading in …5
×

.Less - CSS done right

4,266 views

Published on

Presentation from Barcamp Klagenfurt about dotlesscss.
http://www.dotlesscss.com

Published in: Technology, Education
  • Be the first to comment

.Less - CSS done right

  1. 1. .less - CSS doneright!<br />Daniel Hölbling<br />http://www.tigraine.at<br />http://www.dotlesscss.com<br />
  2. 2. WHAT is CSS?<br />Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (that is, the look and formatting) of a document written in a markup language<br />
  3. 3. Howwe do use CSS<br />CSS Zen Garden<br />Markup iscompletelydecoupled<br />Drasticallychangesthelayoutofthepage. <br />Markup looksgood – CSS a nightmare<br />Multiple classes<br />Good CSS reuse<br />Markup „married“ tospecific CSS code.<br />Not muchbetterthanstyle=„…“ (&lt;2000)<br />
  4. 4. CSS Zen Garden<br />Good CSS lookslikethis:<br />
  5. 5. CSS Zen Garden<br />Good CSS lookslikethis:<br />Redundant! DRY-Violation<br />
  6. 6. Multiple Classes<br />CSS looksgood<br />Markup not so much:<br />
  7. 7. CSS alwayssucks!<br />
  8. 8. LessCss<br />A revolutionary Ruby Framework to fix CSS<br />http://lesscss.org<br />
  9. 9. Variables<br />LESS<br />CSS<br />
  10. 10. Operations<br />LESS<br />CSS<br />
  11. 11. Mixins<br />LESS<br />CSS<br />
  12. 12. Nestedrules<br />LESS<br />CSS<br />
  13. 13. dotless<br />.NET Port ofLessCss<br />Started in July<br />Foundedby:<br />Erik van Brakel<br />Chris John Owen<br />Daniel Hölbling<br />Native .NET parser/compiler<br />
  14. 14. Features<br />CompleteLess Syntax<br />Transparent Lesscompilation<br />(Through HttpHandler)<br />Console Compiler<br />T4CSS – Lessthrough T4 Templates<br />Built in CSS Compression<br />
  15. 15. Demo<br />
  16. 16. Thanksforlistening!<br />More info: http://www.dotlesscss.com<br />My Blog:http://www.tigraine.at<br />

×