CSS előfeldolgozók

1,517 views

Published on

CSS előfeldolgozók: amire frontendesként mindig is vágytál (LESS, SASS, Stylus)

Web konferencia, 2012. október 20.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

No notes for slide

CSS előfeldolgozók

  1. 1. CSS előfeldolgozók – amire frontendesként mindig is vágytálFarkas MátéWeb konferencia, 2012. október 20.
  2. 2. Why we need this?.alert { color: #f36; font-size: 1.4em;}.important { color: #f36; font-size: 1.1em;}
  3. 3. CSS needs a hero. /Stylus/-webkit-transition: color 1s ease;-moz-transition: color 1s ease;-ms-transition: color 1s ease;-o-transition: color 1s ease;transition: color 1s ease;
  4. 4. Write less, do more. /jQuery/.my-module a { /*...*/ }.my-module a:hover { /*...*/ }.my-module strong { /*...*/ }.my-module p.em { /*...*/ }.my-module p.em em { /*...*/ }
  5. 5. LESSThe dynamic stylesheet language• Könnyen tanulható• Elterjedt, aktívan fejlesztik (1.3.1: 2012.10.18.)• Szintaxis kiemelés támogatottsága jó• CSS-jellegű szintaxis• Változók, függvények, mixinek, import• JavaScript (Node.js, Rhino, böngésző(!)…)• A szintaktikus hiba kezelése nem mindig megfelelő• Nincs source map támogatás (nem hiányzott)• Nincsen előre elkészített mixin csomag
  6. 6. LESS usage<link rel="stylesheet/less" type="text/css" href="styles.less"><script src="less.js" type="text/javascript"></script>npm install –g lessmv style.css style.lesslessc style.less >style.css
  7. 7. LESS variables@nice-blue: #5B83AD;@light-blue: @nice-blue + #111;#header { color: @light-blue; }
  8. 8. LESS mixins.rounded-corners (@radius: 5px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius;}#header { .rounded-corners;}#footer { .rounded-corners(10px);}
  9. 9. LESS nested rules#header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } }}
  10. 10. SASS{style with attitude}• Viszonylag elterjedt, aktívan fejlesztik (3.2.1: 2012.08.12.)• Szintaxis kiemelés támogatottsága viszonylag jó• Kétféle szintaxis (SASS: Syntactically Awsome CSS, SCSS: Sassy CSS)• Változók, függvények, mixinek, nested import• Ruby gem• Hiba kezelése megfelelő• Debugolást könnyítő output, FireSass• Compass: széleskörű SASS-ra épülő keretrendszer
  11. 11. SASS usagegem install sassmv style.css style.scsssass --watch style.scss:style.css
  12. 12. SASS variables$blue: #3bbfce;.content-navigation { border-color: $blue; color: darken($blue, 9%);}
  13. 13. SASS mixins@mixin table-base { th {text-align: center; font-weight: bold;} td, th {padding: 2px}}@mixin left($dist) { float: left; margin-left: $dist;}#data { @include left(10px); @include table-base;}
  14. 14. SASS nested rulesli { font: { family: serif; weight: bold; size: 1.2em; }}
  15. 15. SASS selector inheritance.error { .error, .badError { border: 1px #f00; border: 1px #f00;} }.error.intrusion { .error.intrusion, font-size: 1.3em; .badError.intrusion {} font-size: 1.3em; }.badError { .badError { @extend .error; border-width: 3px; border-width: 3px; }}
  16. 16. SASS output (expanded)p { p { font-size: 2em; font-size: 2em; em { } color: #00f; p em { } color: #00f; strong { } color: #f00; p strong { } color: #f00;} }
  17. 17. SASS output (nested)p { font-size: 2em; p { em { font-size: 2em; } color: #00f; } p em { strong { color: #00f; } color: #f00; } p strong {} color: #f00; }
  18. 18. SASS output (nested + line numbers)p { /* line 1, test.scss */ font-size: 2em; p { em { font-size: 2em; } color: #00f; /* line 3, test.scss */ } p em { strong { color: #00f; } color: #f00; /* line 6, test.scss */ } p strong {} color: #f00; }
  19. 19. SASS output (compact)p { p { font-size: 2em; } font-size: 2em; p em { color: #00f; } em { p strong { color: #f00; } color: #00f; } strong { color: #f00; }}
  20. 20. SASS output (compressed)p { font-size: 2em; em { color: #00f; p{font-size:2em}p em{co… } …lor:#00f}p strong{colo… strong { …r:#f00} color: #f00; }}
  21. 21. Compass example (SASS)@import "compass/utilities/tables";.example { table { $table-color: #7a98c6; @include table-scaffolding; @include inner-table-borders(1px, darken($table-color, 40%)); @include outer-table-borders(2px); @include alternating-rows-and-columns($table-color, adjust-hue($table-color, -120deg), #222222); } }
  22. 22. Compass example (CSS1).example table { border: 2px solid black;}.example table th { text-align: center; font-weight: bold;}.example table td,.example table th { padding: 2px;}.example table td.numeric,.example table th.numeric { text-align: right;}.example table th, .example table td { border-right: 1px solid #233551; border-bottom: 1px solid #233551; border-left-width: 0px; border-top-width: 0px;}.example table th:last-child, .example table th.last, .example table td:last-child, .example table td.last { border-right-width: 0px;}
  23. 23. Compass example (CSS2).example table tbody tr:last-child th, .example table tbody tr:last-child td, .example table tfoot tr:last-child th, .example table tfoot tr:last-child td { border-bottom-width: 0px;}.example table tbody tr.last th, .example table tbody tr.last td, .example table tfoot tr.last th, .example table tfoot tr.last td { border-bottom-width: 0px;}.example table thead th { border-bottom: 2px solid black;}.example table tfoot th, .example table tfoot td { border-top: 2px solid black;}.example table th:first-child { border-right: 2px solid black;}.example table th { background-color: white;}.example table th.even, .example table th:nth-child(2n) { background-color: #dddddd;}.example table tr.odd td, .example table tr:nth-child(2n+1) td { background-color: #98c67a;}
  24. 24. Compass example (CSS3).example table tr.odd td.even, .example table tr.odd td:nth-child(2n), .example table tr:nth-child(2n+1) td.even, .example table tr:nth-child(2n+1) td:nth-child(2n) { background-color: #76a458;}.example table tr.even td { background-color: #7a98c6;}.example table tr.even td.even, .example table tr.even td:nth-child(2n) { background-color: #5876a4;}.example table tfoot th, .example table tfoot td { background-color: white;}.example table tfoot th.even, .example table tfoot th:nth-child(2n), .example table tfoot td.even, .example table tfoot td:nth-child(2n) { background-color: #dddddd;}
  25. 25. FireSass, FireStylus
  26. 26. StylusExpressive, dynamic, robust CSS• Kevésbé elterjedt, aktívan fejlesztik (0.30.1: 2012.10.17.)• Szintaxis kiemelés van például Textmate-hez• Opcionális szintaxis• Változók, függvények, mixinek, import• Node.js• Hiba kezelése kitűnő (környezetet is mutat)• Debugolást könnyítő output, FireStylus• Nib (előre elészített mixinek és stílusok)
  27. 27. Stylus syntax (full)body { font: 12px Helvetica, Arial;}a.button { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
  28. 28. Stylus syntax (minimal)body font 12px Helvetica, Ariala.button -webkit-border-radius 5px -moz-border-radius 5px border-radius 5px
  29. 29. Stylus usagenpm install –g stylusstylus –C style.css style.stystylus <style.sty >style.css
  30. 30. Stylus variablesfont-size = 14pxfont = font-size "Lucida Grande", Arialbody font font sans-serif (kezdődhet $ jellel…)
  31. 31. Stylus property lookup #logo width 150px height 80px margin-left -(@width / 2) margin-top -(@height / 2)
  32. 32. Stylus mixinsborder-radius(n) -webkit-border-radius n -moz-border-radius n border-radius nform input[type=button] border-radius(5px)
  33. 33. Stylus nested rulesul li a display block color blue padding 5px html.ie &  inspired by SASS padding 6px &:hover color red
  34. 34. Stylus error reportingError: /tmp/stylus/test.styl:4 1| 2| body { 3| form input { > 4| background: foo[fail]; 5| } 6| } 7|cannot perform foo[(fail)] at "form input" (/tmp/stylus/test.styl:4) at "body" (/tmp/stylus/test.styl:3)
  35. 35. FAQ• Teljesítmény: nem romlik, ha ésszel használjuk• CSS-be hackelés elkerülése a build folyamat tisztázásával• Megjegyzések: az egysoros silent, a CSS comment megmarad, a LESS kivételével van buffered is.• Előny: átállás során egységesítés, majd a változtatás könnyedén ment• CSS változók: majd egyszer…
  36. 36. After all… Nem az a kérdés, hogy használjunk-e CSS előfeldolgozót, hanem hogy melyiket.• Ha egyszerűt szeretnénk: LESS• Ha hajlandók vagyunk tanulni: SASS• Ha kihívás kell: Stylus
  37. 37. Kérdések?Farkas MátéWeb konferencia, 2012. október 20.
  38. 38. LinksAz előadó: • http://farkas-mate.hu/ • http://virtual-call-center.eu/A bemutatott eszközök: • http://lesscss.org/ • http://sass-lang.com/ • http://compass-style.org/ • http://learnboost.github.com/stylus/

×