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