CSS előfeldolgozók

396 views
310 views

Published on

Frontend meetup, 2012.08.07.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
396
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CSS előfeldolgozók

  1. 1. HTTP://WWW.VIRTUAL-CALL-CENTER.EU/ LESS and other CSS preprocessors Farkas Máté Frontend meetup #11, 2012-08-07
  2. 2. What’s wrong with CSS?.my-module a { /*...*/ }.my-module a:hover { /*...*/ }.my-module strong { /*...*/ }.my-module p.em { /*...*/ }.my-module p.em em { /*...*/ }
  3. 3. What’s wrong with CSS?.my-module a { /*...*/ }.my-module a:hover { /*...*/ }.my-module strong { /*...*/ }.my-module p.em { /*...*/ }.my-module p.em em { /*...*/ } verbose, primitive
  4. 4. What’s wrong with CSS?.content { border-radius: ... -*-border-radius: ...}.sidebar { border-radius: ... -*-border-radius: ...}
  5. 5. What’s wrong with CSS?.content { border-radius: ... -*-border-radius: ...} Must repeat.sidebar { yourself border-radius: ... -*-border-radius: ...}
  6. 6. CSS preprocessors- LESS- SASS- Stylus
  7. 7. Saying- LESS The dynamic stylesheet language- SASS Syntactically Awsome CSS (Sass makes CSS fun again)- Stylus Expressive, dynamic, robust CSS
  8. 8. Runs on…- LESS JavaScript (Node.js, Rhino, FF, Chrome, Safari…)- SASS Ruby gem- Stylus Node.js
  9. 9. Syntax- LESS CSS-like syntax- SASS both CSS-like (SCSS) and new (SASS) syntax- Stylus new syntax (optional)
  10. 10. Syntax highlight- LESS Komodo (tested by me)- SASS- Stylus Textmate bundle (official)
  11. 11. Other possible comparisons- Error reporting- Speed, optimalizations- Size of the compiled code- Predefined classes & mixins
  12. 12. Why LESS?- CSS-like syntax: easy to migrate- JavaScript: everything is in the hand
  13. 13. Why LESS?- CSS-like syntax: easy to migrate- JavaScript: everything is in the hand But we must compile styles from now
  14. 14. Variables & functions@defaultSize: 12px;@emColor: #999;p { font-size: @defaultSize; }em { color: @emColor; }quote { font-size: @defaultSize * 1.2; color: lighten(@emColor, 15%);}
  15. 15. Mixins.rounded(@radius: 5px) { border-radius: @radius /*...*/}.sidebar-box { .rounded; }.main-box { .rounded(3em); }
  16. 16. Nested rules.my-module { ... a { ... &:hover { ... } } strong { ... }}
  17. 17. Questions & LinksAbout the presenter:http://www.virtual-call-center.hu/http://farkas-mate.hu/ ?Preprocessors:http://lesscss.org/http://sass-lang.com/http://learnboost.github.com/stylus/

×