0
LESS - CSS w nowej formie
✓ Główny programista w GavickPro
✓ @dziudek
✓ zebymniezapomnial.tumblr.com
Tomasz Dziuda
LESS?
LESS = CSS +
Zmienne
Funkcje
Mixiny
Warunki
Komentarze inline
DRY
Zagnieżdżone reguły
Operacje matematyczne
@base_size: 1000px;
.border-radius(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-rad...
Alternatywy
1. SASS (Ruby)
2. Turbine (PHP)
3. CSS Preprocessor (PHP)
4. Stylus (JavaScript)
Dlaczego warto poznać?
✓ Popularność (np. Bootstrap, Joomla!)
✓ Filozofia DRY
✓ Uzupełnia braki CSS
✓ Dobry na początek prz...
Zalety LESS
1. Łatwe zarządzanie kolorami, rozmiarami tekstu etc.
2. Pozwala zapomnieć o -moz-, -webkit-, -o-, -ms-
3. Zmn...
Wady LESS
✓ Dodatkowy krok przy pracy z plikami
✓ Może powodować problemy ze znalezieniem
odpowiedniego fragmentu kodu
✓ M...
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:
h...
LESS w Joomla!
Narzędzia pomocnicze
✓ LESS.app
✓ less.js
✓ PHPLESS
✓ http://less2css.org/
✓ http://incident57.com/codekit/
Brackets
Dzięki rozszerzeniu BracktesLESS pozwala
kompilować pliki LESS przy zapisie.
Sublime Text 2
Dzięki rozszerzeniom posiada zaawansowane
wsparcie dla LESS: parsowanie plików przy
zapisie, określanie mie...
Espresso, Dreamweaver i inne
Pozostałe edytory z reguły pozwalają co najmniej
na dodanie wsparcia dla składni LESS.
Składnia LESS
Komentarze
Wymarzona składnia
// komentarz inline :-)
Zmienne
@page-width: 1200px;
.wrapper {
max-width: @page-width;
}
Zmienne
Osadzanie zmiennych w wartościach CSS:
background-image: url("@{path_images}/img.png");
Zmienne w CSS
http://dev.w3.org/csswg/css-variables/
Zagnieżdżanie reguł
Zagnieżdżanie reguł
.class1 {
property: value;
.class2 {
property: value;
&:hover {
property: value;
}
}
}
.class1 {
prope...
Zagnieżdżanie reguł
=>
.class1 {
&.big {
property: value;
}
}
.class1.big {
property: value;
}
Zagnieżdżanie reguł
=>
.class1 {
property: value;
@media (max-width: 580px) {
property: value;
}
}
.class1 {
property: val...
Zagnieżdzanie reguł
=>
.child, .sibling {
.parent & {
color: black;
}
& + & {
color: red;
}
}
.parent .child,
.parent .sib...
Parsowanie CSS w przeglądarkach
Warto na to zwrócić uwagę gdy:
✓ Liczy się dla nas każda milisekunda
✓ Nasz kod CSS jest n...
Parsowanie CSS w przeglądarkach
Przeglądarki parsują selektory
od prawej do lewej:
#menu li a
Parsowanie CSS w przeglądarkach
Selektor potomka jest najwolniejszym z selektorów
#menu li a
(trochę) lepiej jest użyć:
#m...
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ó...
Parsowanie CSS w przeglądarkach
1. https://developers.google.com/speed/docs/
best-practices/rendering?hl=pl
2. http://stac...
Operacje matematyczne
@a: 20px;
@b: (@a * 10); // 200px
@c: (@a + @b); // 220px
width: ((@c + 36) * 2px); // 512px
color: ...
CSS i calc()
width: calc(100% - 20px);
font-size: calc(2 * 2em - 24px);
LESS nie uwzględnia rodzaju użytych jednostek
Mixiny
Najprostszy mixin
.border-radius {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
można też za...
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 zo...
Ukrywanie mixinów
.shadows() {
box-shadow: 0 0 3px #000;
text-shadow: 0 0 3px #000;
}
Mixiny - parametry
.shadows(@size) {
box-shadow: 0 0 @size #000;
text-shadow: 0 0 @size #000;
}
Użycie:
nav .submenu {
bor...
Mixiny - wartości domyślne
.shadows(@size: 3px) {
box-shadow: 0 0 @size #000;
text-shadow: 0 0 @size #000;
}
Użycie:
nav ....
Mixiny - !important
.shadows(20px; #aaa) !important;
box-shadow: 0 0 20px #aaa!important;
text-shadow: 0 0 20px #aaa!impor...
Guard mixins
.mixin(@a) when (@a > 10)
.mixin(@a) when (@a > 10), (@a < 100) // OR
.mixin(@a) when (@a > 10) and (@a < 100...
Selektory w mixinach
.mixin() {
.selector {
property: value;
}
}
Mixiny - przestrzenie nazw
#package {
.mixin() {
...
}
}
Użycie:
.cssclass {
#package > .mixin;
}
Funkcje
http://lesscss.org/#reference
Importowanie kodu
LESS pozwala zarówno na importowanie plików
*.css jak i *.less
W wypadku plików *.css wszystkie deklarac...
Importowanie kodu
.class {
@import “test.less”;
border: 10px solid #aaa;
}
Przerwa dla gardła ;-)
Level++
Przecinki a średniki
.shadows(@size: 3px; @color: #000) {
box-shadow: 0 0 @size @color;
text-shadow: 0 0 @size @color;
}
....
Drugi sposób na przecinki
~”text”
Ważne!
samo “text” powoduje wstawienie wartości z
cudzysłowami
Problemy z calc()
calc(~”WYRAŻENIE”)
zamiast
calc(WYRAŻENIE)
Takie same nazwy mixinów
.mixin(@a; @b: 10);
.mixin(@a: 20; @b: 10);
.mixin(@a:30; @b);
W powyższym wypadku wywołanie:
.mi...
Złożone argumenty mixinów
.shadows(@size: 3px; @color: #000) {
box-shadow: 0 0 @arguments;
text-shadow: 0 0 @arguments;
}
...
Mixiny - @rest
.shadows(@pos: 3px 4px; @rest...) {
box-shadow: @pos @rest;
text-shadow: @pos @rest;
}
.test(@a...) {
...
}
Mixiny - pattern matching
.margins(mobile; @value: 20px)
.margins(tablet; @value: 30px)
.margins(@_;@value: 50px)
pierwszy...
Kod JS w mixinach
Kod JS jest wykonywany gdy użyjemy składni:
`kod JS`
.class {
height: `document.body.clientHeight`;
}
(d...
Interpolacja selektorów
@big-headers: ~"h1, h2, h3";
@small-headers: ~"h4, h5, h6";
@{big-headers} {
	 font-weight: 600;
}...
Zmienne nazwy zmiennych
@color-frontpage: #aaa;
@color-subpage: #bbb;
.colorize(@page) {
background-color: ~"@{color-@{pag...
Aliasy
.transition-timing-function(@value) {
-webkit-transition-timing-function: @value;
-moz-transition-timing-function: ...
Co dalej?
✓ trzeba być na bieżąco
✓ Analiza kodu LESS otwartych projektów
✓ Praktyka, praktyka i jeszcze raz... praktyka ;...
Źródła informacji
1. http://lesscss.org/ (EN)
2. http://ciembor.github.io/lesscss.org/ (PL)
3. https://github.com/cloudhea...
Gratis ode mnie ;-)
Mój standardowy zestaw mixinów:
https://github.com/dziudek/LESS-Mixins
Pytania?
Dziękuję za uwagę
-50% zniżki na licencje
Developer i Business
Kod zniżkowy:
joomladay-2013pl
Ważny od 5 do 12 października 2013
LESS - CSS w nowej formie
Upcoming SlideShare
Loading in...5
×

LESS - CSS w nowej formie

959

Published on

Wprowadzenie do preprocessora LESS dla języka CSS.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
959
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "LESS - CSS w nowej formie"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×