LESS - CSS w nowej formie
-
Upload
tomasz-dziuda -
Category
Technology
-
view
951 -
download
0
description
Transcript of LESS - CSS w nowej formie
![Page 1: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/1.jpg)
LESS - CSS w nowej formie
![Page 2: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/2.jpg)
✓ Główny programista w GavickPro
✓ @dziudek
✓ zebymniezapomnial.tumblr.com
Tomasz Dziuda
![Page 3: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/3.jpg)
![Page 4: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/4.jpg)
LESS?
![Page 5: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/5.jpg)
LESS = CSS +
Zmienne
Funkcje
Mixiny
Warunki
Komentarze inline
DRY
Zagnieżdżone reguły
Operacje matematyczne
![Page 6: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/6.jpg)
@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 >>
![Page 7: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/7.jpg)
Alternatywy
1. SASS (Ruby)
2. Turbine (PHP)
3. CSS Preprocessor (PHP)
4. Stylus (JavaScript)
![Page 8: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/8.jpg)
Dlaczego warto poznać?
✓ Popularność (np. Bootstrap, Joomla!)
✓ Filozofia DRY
✓ Uzupełnia braki CSS
✓ Dobry na początek przygody z preprocessorami CSS
![Page 9: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/9.jpg)
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
![Page 10: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/10.jpg)
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
![Page 11: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/11.jpg)
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/
![Page 12: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/12.jpg)
LESS w Joomla!
![Page 13: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/13.jpg)
Narzędzia pomocnicze
✓ LESS.app
✓ less.js
✓ PHPLESS
✓ http://less2css.org/
✓ http://incident57.com/codekit/
![Page 14: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/14.jpg)
Brackets
Dzięki rozszerzeniu BracktesLESS pozwala kompilować pliki LESS przy zapisie.
![Page 15: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/15.jpg)
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.
![Page 16: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/16.jpg)
Espresso, Dreamweaver i inne
Pozostałe edytory z reguły pozwalają co najmniej na dodanie wsparcia dla składni LESS.
![Page 17: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/17.jpg)
Składnia LESS
![Page 18: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/18.jpg)
Komentarze
Wymarzona składnia
// komentarz inline :-)
![Page 19: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/19.jpg)
Zmienne
@page-width: 1200px;
.wrapper {
max-width: @page-width;
}
![Page 20: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/20.jpg)
Zmienne
Osadzanie zmiennych w wartościach CSS:
background-image: url("@{path_images}/img.png");
![Page 21: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/21.jpg)
Zmienne w CSS
http://dev.w3.org/csswg/css-variables/
![Page 22: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/22.jpg)
Zagnieżdżanie reguł
![Page 23: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/23.jpg)
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;
}
=>
![Page 24: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/24.jpg)
Zagnieżdżanie reguł
=>
.class1 {&.big {
property: value;}
}
.class1.big {property: value;
}
![Page 25: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/25.jpg)
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!
![Page 26: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/26.jpg)
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;}
![Page 27: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/27.jpg)
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ą
![Page 28: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/28.jpg)
Parsowanie CSS w przeglądarkach
Przeglądarki parsują selektory
od prawej do lewej:
#menu li a
![Page 29: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/29.jpg)
Parsowanie CSS w przeglądarkach
Selektor potomka jest najwolniejszym z selektorów
#menu li a
(trochę) lepiej jest użyć:
#menu > li > a
![Page 30: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/30.jpg)
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.
![Page 31: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/31.jpg)
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/
![Page 32: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/32.jpg)
Operacje matematyczne
@a: 20px;
@b: (@a * 10); // 200px
@c: (@a + @b); // 220px
width: ((@c + 36) * 2px); // 512px
color: #222 + #333; // #555
![Page 33: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/33.jpg)
CSS i calc()
width: calc(100% - 20px);
font-size: calc(2 * 2em - 24px);
LESS nie uwzględnia rodzaju użytych jednostek
![Page 34: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/34.jpg)
Mixiny
![Page 35: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/35.jpg)
Najprostszy mixin
.border-radius {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}można też zastosować nazwę #border-radius
![Page 36: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/36.jpg)
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)
![Page 37: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/37.jpg)
Ukrywanie mixinów
.shadows() {box-shadow: 0 0 3px #000;text-shadow: 0 0 3px #000;
}
![Page 38: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/38.jpg)
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);
}
![Page 39: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/39.jpg)
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;
}
![Page 40: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/40.jpg)
Mixiny - !important
.shadows(20px; #aaa) !important;
box-shadow: 0 0 20px #aaa!important;text-shadow: 0 0 20px #aaa!important;
![Page 41: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/41.jpg)
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)
![Page 42: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/42.jpg)
Selektory w mixinach
.mixin() {
.selector {
property: value;
}
}
![Page 43: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/43.jpg)
Mixiny - przestrzenie nazw
#package {.mixin() {
...}
}
Użycie:
.cssclass {#package > .mixin;
}
![Page 45: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/45.jpg)
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
![Page 46: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/46.jpg)
Importowanie kodu
.class { @import “test.less”; border: 10px solid #aaa;}
![Page 47: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/47.jpg)
Przerwa dla gardła ;-)
![Page 48: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/48.jpg)
Level++
![Page 49: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/49.jpg)
Przecinki a średniki
.shadows(@size: 3px; @color: #000) {box-shadow: 0 0 @size @color;text-shadow: 0 0 @size @color;
}
.test(a, b, c;);
![Page 50: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/50.jpg)
Drugi sposób na przecinki
~”text”
Ważne!
samo “text” powoduje wstawienie wartości z cudzysłowami
![Page 51: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/51.jpg)
Problemy z calc()
calc(~”WYRAŻENIE”)
zamiast
calc(WYRAŻENIE)
![Page 52: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/52.jpg)
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!)
![Page 53: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/53.jpg)
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;
![Page 54: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/54.jpg)
Mixiny - @rest
.shadows(@pos: 3px 4px; @rest...) {box-shadow: @pos @rest;text-shadow: @pos @rest;
}
.test(@a...) { ...}
![Page 55: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/55.jpg)
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);
![Page 56: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/56.jpg)
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)
![Page 57: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/57.jpg)
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;}
=>
![Page 58: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/58.jpg)
Zmienne nazwy zmiennych
@color-frontpage: #aaa;@color-subpage: #bbb;
.colorize(@page) { background-color: ~"@{color-@{page}}";}
.wrapper { .colorize(subpage);}
![Page 59: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/59.jpg)
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);}
![Page 60: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/60.jpg)
Co dalej?
✓ trzeba być na bieżąco
✓ Analiza kodu LESS otwartych projektów
✓ Praktyka, praktyka i jeszcze raz... praktyka ;-)
✓ SASS?
![Page 61: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/61.jpg)
Ź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 ;-)
![Page 62: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/62.jpg)
Gratis ode mnie ;-)
Mój standardowy zestaw mixinów:
https://github.com/dziudek/LESS-Mixins
![Page 63: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/63.jpg)
Pytania?
![Page 64: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/64.jpg)
Dziękuję za uwagę
![Page 65: LESS - CSS w nowej formie](https://reader031.fdocument.pub/reader031/viewer/2022020217/5563742ed8b42a3b708b4d1e/html5/thumbnails/65.jpg)
-50% zniżki na licencje Developer i Business
Kod zniżkowy:
joomladay-2013plWażny od 5 do 12 października 2013