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. 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. 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. 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. 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. Espresso, Dreamweaver i inne
Pozostałe edytory z reguły pozwalają co najmniej
na dodanie wsparcia dla składni LESS.
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. 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.
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
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
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. 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
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;
}
}
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. Importowanie kodu
Pliki *.less można importować wewnątrz reguł CSS:
.class {
@import “test.less”;
border: 10px solid #aaa;
}
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. Drugi sposób na przecinki
~”text”
Ważne!
samo “text” powoduje wstawienie wartości z cudzysłowami
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. 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. 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. 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. 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)
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. Ź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 ;-)