CSS elofeldolgozok

521 views
356 views

Published on

CSS előfeldolgozók (tréning)

A LESS, SASS és Stylus CSS előfeldolgozók rövid bemutatása egy rövid 1 órás bemutatóhoz.

Published in: Software
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
521
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CSS elofeldolgozok

  1. 1. CSS előfeldolgozók Design kényelmesen
  2. 2. Stíluslapok tegnap: redundancia .sidebar { color: #445566; } .menu { color: #445566; }
  3. 3. Stíluslapok tegnap: CSS3 -webkit-transition: width 2s; transition: width 2s;
  4. 4. Stíluslapok tegnap: helyérzékeny szelektorok .menu { … } .menu ul { … } .menu li { … } .menu li a { … } .menu li a span { … } .menu li a img { … }
  5. 5. Stíluslapok tegnap: fájlok <link … href="template.css"> <link … href="page.css"> <link … href="sidebar.css"> <link … href="admin.css"> <link … href="datatable.css">
  6. 6. Stíluslapok ma • A CSS szintaxisa elavult • Nincsenek változók  • Nincsenek függvények • Nincs // comment • De van megoldás!
  7. 7. Stíluslapok ma
  8. 8. LASS • Első CSS előfeldolgozó • Javascript alapú fordító • Folyamatosan fejlesztik még mindig • Nagyon könnyen tanulható • Nehéz debuggolni • Van mixin könyvtár hozzá • http://lesscss.org/
  9. 9. LESS: változók @peltex-zold: #00cc22; @peltex-kek: #1144bc; #sidebar { background-color: @peltex-kek; }
  10. 10. LESS: mixinek .bordered { border-top: dotted 1px black; border-bottom: dotted 2px black; } table td { .bordered; }
  11. 11. LESS: mixinek paraméterrel .bordered (@thick: 1px) { border-top: dotted @thick black; border-bottom:dotted @thick black; } table td { .bordered(2px); }
  12. 12. LESS: mixin könyvtár • Rengeteg előre definiált mixin • Ahogy a szabványosítás halad, a könyvtár is frissül (pl. border-radius) • Példa: .gradient(#F5F5F5, #EEE, #FFF); .rounded(5px); • http://lesselements.com/
  13. 13. LESS: nesting .menu { height: 40px; ul { padding-left: 0; } li { border: 1px solid brown; &:first-child { border-left: 0; } } }
  14. 14. LESS: matek és függvények • Matek @var: (1px + 5); color: (#888 / 4); • Függvények width: percentage(0.5); // 50%
  15. 15. LESS: egyebek • Kommentek Van //  • Statikus linkelés @import "lib.css"; • Fordításkor összeszerkesztődik!
  16. 16. SASS • Folyamatosan fejlesztik • Könnyen tanulható • Többet tud mint a LESS • Remek debugger • Ruby alapú fordító • A SASS elérhető Gemként • Van mixin könyvtár hozzá • http://sass-lang.com/
  17. 17. SASS telepítés és használat $ gem install sass $ mv style.css style.scss $ sass --watch style.scss:style.css
  18. 18. SASS: változók $blue: #3bbfce; $margin: 16px; .border { padding: $margin / 2; margin: $margin / 2; border-color: $blue; }
  19. 19. SASS: mixinek (paraméterrel) @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; }
  20. 20. SASS: mixin könyvtár • Rengeteg előre definiált mixin • Ahogy a szabványosítás halad, a könyvtár is frissül (pl. border-radius) • Példa: .simple { @include border-radius(4px, 4px); } font-face($name, $font-files, $eot, $weight, $style) • http://compass-style.org
  21. 21. SASS: nesting, matek és függvények Ugyanúgy mint LESS-ben
  22. 22. SASS: öröklődés .error { border: 1px #f00; background: #fdd; } .error.intrusion { font-size: 1.3em; font-weight: bold; } .badError { @extend .error; border-width: 3px; } .error, .badError { border: 1px #f00; background: #fdd; } .error.intrusion, .badError.intrusion { font-size: 1.3em; font-weight: bold; } .badError { border-width: 3px; } FORDÍTÁS
  23. 23. SASS vezérlési szerkezetek $type: monster; p { @if $type == ocean { color: blue; } @else { color: black; } } @for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } }
  24. 24. SASS egyebek • Itt is van // • Statikus linkelés mint LESS-ben • CSS tömörítés • …és nagyon jó debugger!
  25. 25. csak elvetemülteknek • Folyamatosan fejlesztik • Nehezen tanulható • Nagy kifejezőerő • Remek debugger • Javascript alapú fordító • Van mixin könyvtár hozzá • Csak hardcore arcoknak • http://learnboost.github.io/stylus/
  26. 26. innen indulunk body { font: 12px Helvetica, Arial, sans-serif; } a.button { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
  27. 27. a kapcsos zárójelek feleslegesek… body font: 12px Helvetica, Arial, sans-serif; a.button -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
  28. 28. …a pontosvessző is… body font: 12px Helvetica, Arial, sans-serif a.button -webkit-border-radius: 5px -moz-border-radius: 5px border-radius: 5px
  29. 29. …ne álljunk meg itt, menjen a pontosvessző is! body font 12px Helvetica, Arial, sans-serif a.button -webkit-border-radius 5px -moz-border-radius 5px border-radius 5px
  30. 30. de ez csak mind opcionális body { font: 12px Helvetica, Arial, sans-serif; } a.button { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
  31. 31. változók font-size = 14px body font font-size Arial, sans-serif #logo width: 150px height: 80px margin-left: -(@width / 2) margin-top: -(@height / 2)
  32. 32. mixinek (paraméterrel) border-radius(n) -webkit-border-radius n -moz-border-radius n border-radius n form input[type=button] border-radius(5px)
  33. 33. mixinek (paraméterrel) border-radius() -webkit-border-radius arguments -moz-border-radius arguments border-radius arguments
  34. 34. mixin könyvtár • Ahogy már eddig láthattuk • Példa: body background linear-gradient(top, white, black) • http://visionmedia.github.io/nib/
  35. 35. nesting, matek és függvények Természetesen ezt is tudja.
  36. 36. öröklődés .message { padding: 10px; border: 1px solid #eee; } .warning { @extend .message; color: #E2E21E; } .message, .warning { padding: 10px; border: 1px solid #eee; } .warning { color: #E2E21E; } FORDÍTÁS
  37. 37. vezérlési szerkezetek box(x, y, margin = false) padding y x if margin margin y x
  38. 38. egyebek • Használható a // • Statikus linkelés • CSS tömörítés • Nagyon jó debugger
  39. 39. Élő demó?

×