Less WordUp #2 - Wrocław 2013

1,650 views

Published on

Krótkie wprowadzenie do języka LESS będącego dialektem języka CSS: omówienie idei LESS, przydatnych narzędzi oraz składni LESS-a

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,650
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Less WordUp #2 - Wrocław 2013

  1. 1. LESS - CSS dla leniwych
  2. 2. Tomasz Dziuda Główny programista w GavickPro dziudek@gmail.com Twitter: @dziudek zebymniezapomnial.tumblr.com
  3. 3. Czym jest LESS?
  4. 4. Alternatywy 1. SASS (Ruby) 2. Turbine (PHP) 3. CSS Preprocessor (PHP) 4. Stylus (JavaScript)
  5. 5. Dlaczego warto poznać LESS? • Popularność (np. Bootstrap, Joomla!) • Ponowne wykorzystanie kodu • Udostępnia to czego nie ma (a powinien) CSS • Dobry na początek przygody z preprocessorami CSS
  6. 6. Zalety LESS 1. Łatwe zarządzanie kolorami, rozmiarami tekstu etc. 2. Pozwala zapomnieć o vendor prefixes 3. Zmniejszenie liczby plików CSS 4. Łatwiejsze tworzenie dedykowanych plików CSS dla wybranych podstron
  7. 7. Wady LESS • Wymaga dodatkowego kroku przy pracy z plikami • Może powodować problemy ze znalezieniem odpowiedniego fragmentu kodu w Chrome Dev Tools czy Firebugu • Nieumiejętnie stosowany może wygenerować sporo nadmiarowego kodu CSS. • Wciąż brakuje mu wielu udogodnień znanych np. z SASS
  8. 8. 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/
  9. 9. Workflow przy LESS Ręcznie Automatycznie
  10. 10. Narzędzia pomocnicze • LESS.app • less.js • PHPLESS • http://less2css.org/ • http://incident57.com/codekit/
  11. 11. Brackets Dzięki rozszerzeniu BracktesLESS pozwala kompilować pliki LESS przy zapisie.
  12. 12. 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.
  13. 13. Espresso, Dreamweaver i inne Pozostałe edytory z reguły pozwalają co najmniej na dodanie wsparcia dla składni LESS.
  14. 14. Mój plugin - LESSer
  15. 15. Jak działa LESSer?
  16. 16. LESSer - beta Wersję beta można pobrać z: https://github.com/dziudek/LESSer
  17. 17. Składnia LESS
  18. 18. Komentarze Wymarzona składnia // komentarz inline :-)
  19. 19. Zmienne @page-width: 1200px; .wrapper { max-width: @page-width; }
  20. 20. Zmienne Osadzanie zmiennych w wartościach CSS: background-image: url("@{path_images}/img.png");
  21. 21. Zmienne w CSS http://dev.w3.org/csswg/css-variables/
  22. 22. Zagnieżdżanie reguł
  23. 23. 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; } =>
  24. 24. Zagnieżdżanie reguł => .class1 { &.big { property: value; } } .class1.big { property: value; }
  25. 25. 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!
  26. 26. 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; }
  27. 27. 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ą renderowania się strony (głównie urządzenia mobilne)
  28. 28. Parsowanie CSS w przeglądarkach Przeglądarki parsują selektory od prawej do lewej: #menu li a
  29. 29. Parsowanie CSS w przeglądarkach Selektor potomka jest najwolniejszym z selektorów #menu li a (trochę) lepiej jest użyć: #menu > li > a
  30. 30. 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.
  31. 31. 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/
  32. 32. Operacje matematyczne @a: 20px; @b: (@a * 10); // 200px @c: (@a + @b); // 220px width: ((@c + 36) * 2px); // 512px color: #222 + #333; // #555
  33. 33. CSS i calc() width: calc(100% - 20px); font-size: calc(2 * 2em - 24px); LESS nie uwzględnia rodzaju użytych jednostek
  34. 34. Mixiny
  35. 35. Najprostszy mixin .border-radius { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } można też zastosować nazwę #border-radius
  36. 36. 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)
  37. 37. Ukrywanie mixinów Mixiny traktowane są jak klasy CSS chyba, że zrobimy z nich mixiny bezparametrowe: .shadows() { box-shadow: 0 0 3px #000; text-shadow: 0 0 3px #000; } Są one wtedy ukrywane w wynikowym kodzie CSS
  38. 38. 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); }
  39. 39. 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; }
  40. 40. Mixiny - !important Użycie !important po mixinie powoduje automatyczne dodanie !important do wszystkich właściwości w nim użytych .shadows(20px; #aaa) !important;
  41. 41. 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)
  42. 42. Selektory w mixinach W mixinach można umieszczać też całe grupy selektorów, co powoduje, że możemy generować fragmenty kodu zależnie od wartości zmiennych: .mixin() { .selector { property: value; } }
  43. 43. Mixiny - przestrzenie nazw #package { .mixin() { ... } } Użycie: .cssclass { #package > .mixin; }
  44. 44. Funkcje http://lesscss.org/#reference
  45. 45. 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 (ewentualnie są umieszczane zaraz po @charset)
  46. 46. Importowanie kodu Pliki *.less można importować wewnątrz reguł CSS: .class { @import “test.less”; border: 10px solid #aaa; }
  47. 47. Przerwa dla gardła ;-)
  48. 48. Level++
  49. 49. Przecinki a średniki Parametry można rozdzielać przecinkami lub średnikami, przy czym średniki są bezpieczniejsze: .shadows(@size: 3px; @color: #000) { box-shadow: 0 0 @size @color; text-shadow: 0 0 @size @color; } Na końcu parametru z przecinkami można dodać średnik aby był traktowany jako jeden argument: .test(a, b, c;);
  50. 50. Drugi sposób na przecinki ~”text” Ważne! samo “text” powoduje wstawienie wartości z cudzysłowami
  51. 51. Problemy z calc() calc(~”WYRAŻENIE”) zamiast calc(WYRAŻENIE)
  52. 52. Takie same nazwy mixinów Możemy zdefiniować kilka mixinów o tej samej nazwie - użyte zostaną wszystkie mixiny, które mają odpowiednie argumenty .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!)
  53. 53. Złożone argumenty mixinów @arguments pozwala użyć wartości wszystkich parametrów za jednym zamachem: .shadows(@size: 3px; @color: #000) { box-shadow: 0 0 @arguments; text-shadow: 0 0 @arguments; }
  54. 54. Mixiny - @rest LESS pozwala na określenie zmiennej ilości argumentów - tutaj przydaje się zmienna @rest: .shadows(@pos: 3px 4px; @rest...) { box-shadow: @pos @rest; text-shadow: @pos @rest; } Można też sprawić, że pierwsza zmienna przyjmie dowolny ciąg argumentów: .test(@a...) { ... }
  55. 55. Mixiny - pattern matching Jako pierwszy argument mixina możemy podać ciąg znaków - wtedy będzie wymagał do swojego wywołania podania tego ciągu znaków jako pierwszego argumentu: .margins(mobile; @value: 20px) .margins(tablet; @value: 30px) .margins(@_;@value: 50px) Wtedy pierwszy mixin wywoła się gdy: @mode: mobile; .margins(@mode); .margins(@mode; 10px);
  56. 56. 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)
  57. 57. 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; } =>
  58. 58. Zmienne nazwy zmiennych @color-frontpage: #aaa; @color-subpage: #bbb; .colorize(@page) { background-color: ~"@{color-@{page}}"; } .wrapper { .colorize(subpage); }
  59. 59. 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); }
  60. 60. Co dalej? • LESS się ciągle rozwija - trzeba być na bieżąco ;-) • Analiza kodu LESS popularnych otwartych projektów • Praktyka, praktyka i jeszcze raz... praktyka ;-) • SASS?
  61. 61. Ź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 ;-)
  62. 62. Gratis ode mnie ;-) Mój standardowy zestaw mixinów: https://github.com/dziudek/LESS-Mixins
  63. 63. Pytania?
  64. 64. Dziękuję za uwagę

×