Wprowadzenie do preprocessora LESS dla języka CSS.

1. LESS - CSS w nowej formie

2. ✓ Główny programista w GavickPro
✓ @dziudek
✓ zebymniezapomnial.tumblr.com
Tomasz Dziuda

4. LESS?

5. LESS = CSS +
Zmienne
Funkcje
Mixiny
Warunki
Komentarze inline
DRY
Zagnieżdżone reguły
Operacje matematyczne

6. @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 >>

7. Alternatywy
1. SASS (Ruby)
2. Turbine (PHP)
3. CSS Preprocessor (PHP)
4. Stylus (JavaScript)

8. Dlaczego warto poznać?
✓ Popularność (np. Bootstrap, Joomla!)
✓ Filozofia DRY
✓ Uzupełnia braki CSS
✓ Dobry na początek przygody z preprocessorami CSS

9. 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

10. 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

11. 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/

12. LESS w Joomla!

13. Narzędzia pomocnicze
✓ LESS.app
✓ less.js
✓ PHPLESS
✓ http://less2css.org/
✓ http://incident57.com/codekit/

14. Brackets
Dzięki rozszerzeniu BracktesLESS pozwala
kompilować pliki LESS przy zapisie.

15. 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.

16. Espresso, Dreamweaver i inne
Pozostałe edytory z reguły pozwalają co najmniej
na dodanie wsparcia dla składni LESS.

17. Składnia LESS

18. Komentarze
Wymarzona składnia
// komentarz inline :-)

19. Zmienne
@page-width: 1200px;
.wrapper {
max-width: @page-width;
}

20. Zmienne
Osadzanie zmiennych w wartościach CSS:
background-image: url("@{path_images}/img.png");

21. Zmienne w CSS
http://dev.w3.org/csswg/css-variables/

22. Zagnieżdżanie reguł

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. Zagnieżdżanie reguł
=>
.class1 {
&.big {
property: value;
}
}
.class1.big {
property: value;
}

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. 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. 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ą

28. Parsowanie CSS w przeglądarkach
Przeglądarki parsują selektory
od prawej do lewej:
#menu li a

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. 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. 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. Operacje matematyczne
@a: 20px;
@b: (@a * 10); // 200px
@c: (@a + @b); // 220px
width: ((@c + 36) * 2px); // 512px
color: #222 + #333; // #555

33. CSS i calc()
width: calc(100% - 20px);
font-size: calc(2 * 2em - 24px);
LESS nie uwzględnia rodzaju użytych jednostek

34. Mixiny

35. Najprostszy mixin
.border-radius {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
można też zastosować nazwę #border-radius

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. Ukrywanie mixinów
.shadows() {
box-shadow: 0 0 3px #000;
text-shadow: 0 0 3px #000;
}

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. 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. Mixiny - !important
.shadows(20px; #aaa) !important;
box-shadow: 0 0 20px #aaa!important;
text-shadow: 0 0 20px #aaa!important;

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. Selektory w mixinach
.mixin() {
.selector {
property: value;
}
}

43. Mixiny - przestrzenie nazw
#package {
.mixin() {
...
}
}
Użycie:
.cssclass {
#package > .mixin;
}

44. Funkcje
http://lesscss.org/#reference

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

46. Importowanie kodu
.class {
@import “test.less”;
border: 10px solid #aaa;
}

47. Przerwa dla gardła ;-)

48. Level++

49. Przecinki a średniki
.shadows(@size: 3px; @color: #000) {
box-shadow: 0 0 @size @color;
text-shadow: 0 0 @size @color;
}
.test(a, b, c;);

50. Drugi sposób na przecinki
~”text”
Ważne!
samo “text” powoduje wstawienie wartości z
cudzysłowami

51. Problemy z calc()
calc(~”WYRAŻENIE”)
zamiast
calc(WYRAŻENIE)

52. 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!)

53. 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;

54. Mixiny - @rest
.shadows(@pos: 3px 4px; @rest...) {
box-shadow: @pos @rest;
text-shadow: @pos @rest;
}
.test(@a...) {
...
}

55. 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);

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. 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. Zmienne nazwy zmiennych
@color-frontpage: #aaa;
@color-subpage: #bbb;
.colorize(@page) {
background-color: ~"@{color-@{page}}";
}
.wrapper {
.colorize(subpage);
}

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. Co dalej?
✓ trzeba być na bieżąco
✓ Analiza kodu LESS otwartych projektów
✓ Praktyka, praktyka i jeszcze raz... praktyka ;-)
✓ SASS?

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. Gratis ode mnie ;-)
Mój standardowy zestaw mixinów:
https://github.com/dziudek/LESS-Mixins

63. Pytania?

64. Dziękuję za uwagę

65. -50% zniżki na licencje
Developer i Business
Kod zniżkowy:
joomladay-2013pl
Ważny od 5 do 12 października 2013