LESS - CSS w nowej formie
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

LESS - CSS w nowej formie

  • 941 views
Uploaded on

Wprowadzenie do preprocessora LESS dla języka CSS.

Wprowadzenie do preprocessora LESS dla języka CSS.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
941
On Slideshare
941
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
10
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. LESS - CSS w nowej formie
  • 2. ✓ Główny programista w GavickPro ✓ @dziudek ✓ zebymniezapomnial.tumblr.com Tomasz Dziuda
  • 3. LESS?
  • 4. LESS = CSS + Zmienne Funkcje Mixiny Warunki Komentarze inline DRY Zagnieżdżone reguły Operacje matematyczne
  • 5. @base_size: 1000px; .border-radius(@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } .parent { .border-radius; width: @base_size; .child { .border-radius; float: left; width: @base_size * 0.25; &:hover { background: #eee; } & > div { .border-radius; } } } .parent { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; width: 1000px; } .parent .child { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; float: left; width: 250px; } .parent .child:hover { background: #eee; } .parent .child > div { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } LESS CSS>> Preprocessor >>
  • 6. Alternatywy 1. SASS (Ruby) 2. Turbine (PHP) 3. CSS Preprocessor (PHP) 4. Stylus (JavaScript)
  • 7. Dlaczego warto poznać? ✓ Popularność (np. Bootstrap, Joomla!) ✓ Filozofia DRY ✓ Uzupełnia braki CSS ✓ Dobry na początek przygody z preprocessorami CSS
  • 8. Zalety LESS 1. Łatwe zarządzanie kolorami, rozmiarami tekstu etc. 2. Pozwala zapomnieć o -moz-, -webkit-, -o-, -ms- 3. Zmniejszenie ilości plików CSS 4. Łatwiejsze tworzenie dedykowanych plików CSS dla wybranych podstron
  • 9. Wady LESS ✓ Dodatkowy krok przy pracy z plikami ✓ Może powodować problemy ze znalezieniem odpowiedniego fragmentu kodu ✓ Może wygenerować sporo nadmiarowego kodu CSS. ✓ SASS > LESS
  • 10. IE a duże pliki CSS Przy korzystaniu z jednego pliku warto pamiętać, że IE < 10 ma limit 4095 selektorów w jednym pliku: http://marc.baffl.co.uk/browser_bugs/css-selector-limit/
  • 11. LESS w Joomla!
  • 12. Narzędzia pomocnicze ✓ LESS.app ✓ less.js ✓ PHPLESS ✓ http://less2css.org/ ✓ http://incident57.com/codekit/
  • 13. Brackets Dzięki rozszerzeniu BracktesLESS pozwala kompilować pliki LESS przy zapisie.
  • 14. Sublime Text 2 Dzięki rozszerzeniom posiada zaawansowane wsparcie dla LESS: parsowanie plików przy zapisie, określanie miejsca docelowego dla plików LESS, pomijanie plików przy generowaniu plików CSS etc.
  • 15. Espresso, Dreamweaver i inne Pozostałe edytory z reguły pozwalają co najmniej na dodanie wsparcia dla składni LESS.
  • 16. Składnia LESS
  • 17. Komentarze Wymarzona składnia // komentarz inline :-)
  • 18. Zmienne @page-width: 1200px; .wrapper { max-width: @page-width; }
  • 19. Zmienne Osadzanie zmiennych w wartościach CSS: background-image: url("@{path_images}/img.png");
  • 20. Zmienne w CSS http://dev.w3.org/csswg/css-variables/
  • 21. Zagnieżdżanie reguł
  • 22. Zagnieżdżanie reguł .class1 { property: value; .class2 { property: value; &:hover { property: value; } } } .class1 { property: value; } .class1 .class2 { property: value } .class1 .class2:hover { property: value; } =>
  • 23. Zagnieżdżanie reguł => .class1 { &.big { property: value; } } .class1.big { property: value; }
  • 24. Zagnieżdżanie reguł => .class1 { property: value; @media (max-width: 580px) { property: value; } } .class1 { property: value; } @media (max-width: 580px) { .class1 { property: value; } } Less nie grupuje reguł dla media queries!
  • 25. Zagnieżdzanie reguł => .child, .sibling { .parent & { color: black; } & + & { color: red; } } .parent .child, .parent .sibling { color: black; } .child + .child, .child + .sibling, .sibling + .child, .sibling + .sibling { color: red; }
  • 26. Parsowanie CSS w przeglądarkach Warto na to zwrócić uwagę gdy: ✓ Liczy się dla nas każda milisekunda ✓ Nasz kod CSS jest naprawdę złożony ✓ Gdy mamy problemy z wydajnością
  • 27. Parsowanie CSS w przeglądarkach Przeglądarki parsują selektory od prawej do lewej: #menu li a
  • 28. Parsowanie CSS w przeglądarkach Selektor potomka jest najwolniejszym z selektorów #menu li a (trochę) lepiej jest użyć: #menu > li > a
  • 29. Parsowanie CSS w przeglądarkach Klasyfikacja reguł według wydajności (malejąco): 1. reguły ID 2. reguły klas 3. reguły tagów 4. reguły uniwersalne Powyższa klasyfikacja jest uproszczona dla celów poglądowych - tak naprawdę najwolniejsze są pseudoklasy i selektory atrybutów, a dodatkowo pomiędzy ID a klasami z reguły nie ma zbyt wielkich różnic w wydajności.
  • 30. Parsowanie CSS w przeglądarkach 1. https://developers.google.com/speed/docs/ best-practices/rendering?hl=pl 2. http://stackoverflow.com/questions/5797014/ why-do-browsers-match-css-selectors-from- right-to-left 3. http://csswizardry.com/2011/09/writing-efficient- css-selectors/
  • 31. Operacje matematyczne @a: 20px; @b: (@a * 10); // 200px @c: (@a + @b); // 220px width: ((@c + 36) * 2px); // 512px color: #222 + #333; // #555
  • 32. CSS i calc() width: calc(100% - 20px); font-size: calc(2 * 2em - 24px); LESS nie uwzględnia rodzaju użytych jednostek
  • 33. Mixiny
  • 34. Najprostszy mixin .border-radius { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } można też zastosować nazwę #border-radius
  • 35. Podwójne właściwości Nawet jeżeli powtórzymy jakąś właściwość, to jeżeli w obu wypadkach ma ona taką samą wartość - nie zostanie ona powielona (pod warunkiem, że powielimy ją w obrębie jednej klasy/mixinu)
  • 36. Ukrywanie mixinów .shadows() { box-shadow: 0 0 3px #000; text-shadow: 0 0 3px #000; }
  • 37. Mixiny - parametry .shadows(@size) { box-shadow: 0 0 @size #000; text-shadow: 0 0 @size #000; } Użycie: nav .submenu { border: 1px solid #eee; .shadows(3px); }
  • 38. Mixiny - wartości domyślne .shadows(@size: 3px) { box-shadow: 0 0 @size #000; text-shadow: 0 0 @size #000; } Użycie: nav .submenu { border: 1px solid #eee; .shadows; }
  • 39. Mixiny - !important .shadows(20px; #aaa) !important; box-shadow: 0 0 20px #aaa!important; text-shadow: 0 0 20px #aaa!important;
  • 40. Guard mixins .mixin(@a) when (@a > 10) .mixin(@a) when (@a > 10), (@a < 100) // OR .mixin(@a) when (@a > 10) and (@a < 100) .mixin(@a) when not (@a > 10)
  • 41. Selektory w mixinach .mixin() { .selector { property: value; } }
  • 42. Mixiny - przestrzenie nazw #package { .mixin() { ... } } Użycie: .cssclass { #package > .mixin; }
  • 43. Funkcje http://lesscss.org/#reference
  • 44. Importowanie kodu LESS pozwala zarówno na importowanie plików *.css jak i *.less W wypadku plików *.css wszystkie deklaracje @import przenoszone są podczas kompilacji na samą górę pliku
  • 45. Importowanie kodu .class { @import “test.less”; border: 10px solid #aaa; }
  • 46. Przerwa dla gardła ;-)
  • 47. Level++
  • 48. Przecinki a średniki .shadows(@size: 3px; @color: #000) { box-shadow: 0 0 @size @color; text-shadow: 0 0 @size @color; } .test(a, b, c;);
  • 49. Drugi sposób na przecinki ~”text” Ważne! samo “text” powoduje wstawienie wartości z cudzysłowami
  • 50. Problemy z calc() calc(~”WYRAŻENIE”) zamiast calc(WYRAŻENIE)
  • 51. Takie same nazwy mixinów .mixin(@a; @b: 10); .mixin(@a: 20; @b: 10); .mixin(@a:30; @b); W powyższym wypadku wywołanie: .mixin(10); spowoduje wykorzystanie kodu CSS z pierwszego i drugiego mixinu (i powielenie właściwości CSS!)
  • 52. Złożone argumenty mixinów .shadows(@size: 3px; @color: #000) { box-shadow: 0 0 @arguments; text-shadow: 0 0 @arguments; } .shadows(2px, #aaa); box-shadow: 0 0 2px #aaa; text-shadow: 0 0 2px #aaa;
  • 53. Mixiny - @rest .shadows(@pos: 3px 4px; @rest...) { box-shadow: @pos @rest; text-shadow: @pos @rest; } .test(@a...) { ... }
  • 54. Mixiny - pattern matching .margins(mobile; @value: 20px) .margins(tablet; @value: 30px) .margins(@_;@value: 50px) pierwszy mixin wywoła się gdy: @mode: mobile; .margins(@mode); .margins(@mode; 10px);
  • 55. Kod JS w mixinach Kod JS jest wykonywany gdy użyjemy składni: `kod JS` .class { height: `document.body.clientHeight`; } (działa tylko z less.js)
  • 56. Interpolacja selektorów @big-headers: ~"h1, h2, h3"; @small-headers: ~"h4, h5, h6"; @{big-headers} { font-weight: 600; } @{small-headers} { font-weight: 400; } @{big-headers}, @{small-headers} { text-transform: uppercase; } h1, h2, h3 { font-weight: 600; } h4, h5, h6 { font-weight: 400; } h1, h2, h3, h4, h5, h6 { text-transform: uppercase; } =>
  • 57. Zmienne nazwy zmiennych @color-frontpage: #aaa; @color-subpage: #bbb; .colorize(@page) { background-color: ~"@{color-@{page}}"; } .wrapper { .colorize(subpage); }
  • 58. Aliasy .transition-timing-function(@value) { -webkit-transition-timing-function: @value; -moz-transition-timing-function: @value; -o-transition-timing-function: @value; transition-timing-function: @value; } // Alias .trans-timing(@value) { .transition-timing-function(@value); }
  • 59. Co dalej? ✓ trzeba być na bieżąco ✓ Analiza kodu LESS otwartych projektów ✓ Praktyka, praktyka i jeszcze raz... praktyka ;-) ✓ SASS?
  • 60. Źródła informacji 1. http://lesscss.org/ (EN) 2. http://ciembor.github.io/lesscss.org/ (PL) 3. https://github.com/cloudhead/less.js/wiki (EN) 4. Stack Overflow ;-)
  • 61. Gratis ode mnie ;-) Mój standardowy zestaw mixinów: https://github.com/dziudek/LESS-Mixins
  • 62. Pytania?
  • 63. Dziękuję za uwagę
  • 64. -50% zniżki na licencje Developer i Business Kod zniżkowy: joomladay-2013pl Ważny od 5 do 12 października 2013