LESS - CSS dla leniwych

Transkrypt

1 LESS - CSS dla leniwych

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

3 Czym jest LESS?

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

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:

9 Workflow przy LESS Ręcznie Automatycznie

10 Narzędzia pomocnicze LESS.app less.js PHPLESS

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

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.

14 Mój plugin - LESSer

15 Jak działa LESSer?

16 LESSer - beta Wersję beta można pobrać z:

17 Składnia LESS

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

19 1200px;.wrapper {

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

21 Zmienne w CSS

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;.class1 { property: (max-width: 580px) { property: value; (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ą 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.

31 Parsowanie CSS w przeglądarkach why-do-browsers-match-css-selectors-fromright-to-left 3.

32 Operacje * 10); // // 220px width: + 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 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 Mixiny - parametry.shadows(@size) { box-shadow: 0 #000; text-shadow: 0 #000; Użycie: nav.submenu { border: 1px solid #eee;.shadows(3px);

39 Mixiny - wartości domyślne.shadows(@size: 3px) { box-shadow: 0 #000; text-shadow: 0 #000; Użycie: nav.submenu { border: 1px solid #eee;.shadows;

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 when > when > 10), < 100) // when > 10) and < when not > 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;

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

44 Funkcje

45 Importowanie kodu LESS pozwala zarówno na importowanie plików *.css jak i *.less W wypadku plików *.css wszystkie przenoszone są podczas kompilacji na samą górę pliku (ewentualnie są umieszczane zaraz

46 Importowanie kodu Pliki *.less można importować wewnątrz reguł CSS:.class test.less ; border: 10px solid #aaa;

47 Przerwa dla gardła ;-)

48 Level++

49 Przecinki a średniki Parametry można rozdzielać przecinkami lub średnikami, przy czym średniki są bezpieczniejsze:.shadows(@size: #000) { box-shadow: text-shadow: 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

51 Problemy z calc() calc(~ WYRAŻENIE ) zamiast calc(wyrażenie)

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 10);.mixin(@a: 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 pozwala użyć wartości wszystkich parametrów za jednym #000) { box-shadow: 0 text-shadow: 0

54 Mixiny LESS pozwala na określenie zmiennej ilości argumentów - tutaj przydaje się 3px @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 30px).margins(@_;@value: 50px) Wtedy pierwszy mixin wywoła się 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 ~"h1, h2, ~"h4, h5, { font-weight: { { 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 { background-color: {.colorize(subpage);

59 { // Alias.trans-timing(@value) {.transition-timing-function(@value);

60 Co dalej? LESS się ciągle rozwija - trzeba być na bieżąco ;-) Praktyka, praktyka i jeszcze raz... praktyka ;-) Analiza kodu LESS popularnych otwartych projektów SASS?

61 Źródła informacji 1. (EN) 2. (PL) 3. (EN) 4. Stack Overflow ;-)

62 Gratis ode mnie ;-) Mój standardowy zestaw mixinów:

63 Pytania?

64 Dziękuję za uwagę