LESS, Stylus, Sass i Compass
Zaawansowane
Mixiny
SASS
Mixin media queries
Poniższy mixin służy do ustalania styli dla całej strony (ustalamy w nim style dla wszystkich elementów) o określonej szerokości i wielkości fontu. Można potem go użyć w media queries podstawiając odpowiednie szerokości strony i wielkości fontów, na podstawie których są wyliczane wielkości elementów-dzieci przez mixin:
=base_width_changes($base_width, $base_font)
#wrapper
width: $base_width
.button
width: $base_font * 10
Użycie (style dla strony o szerokości większej niż 1170px):
@media screen and (min-width: 1171px)
+base_width_changes(1160px, 16px)
//poniższe dodatkowe zmiany,
//które nie są zapisane w mixinie base_width_changes
#width-1171-specific-element,
.width-1171-specific-class
display: block
Mixin ellipsis
Poniższy mixin ucina tekst i dodaje trzy kropki na końcu, gdy tekst przekracza szerokość rodzica.
@mixin ellipsis
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
Użycie extend
SASS
SASS nie może rozszerzać wybranych zagnieżdzonych selektorów, np. @extend .infoBox h3
nie zadziała. Za to przekopiowanie styli h3
do .errorBox
zadziała, gdy użyjemy extend
rozszerzając wszystkie selektory z .infoBox
.
.infoBox {
font-size: 2em;
h3 {
font-size: 3em;
}
}
//poniższy fragment jest prawidłowy (zadziała również na h3)
.errorBox {
@extend .infoBox;
color: red;
}
//poniższy fragment jest błędny
.specialHeader {
@extend .infoBox h3;
}
LESS
W odróżnieniu od SASS, LESS nie rozszerza wszystkich zagnieżdżonych selektorów. Przykładowo, gdyby w klasie .infoBox
znajdowały się style dla h3
, nie byłyby one uwzględnione w klasie .errorBox
. Konieczne jest dodanie all
do extend
, np. &:extend(.infoBox all)
.
.infoBox {
font-size: 2em;
h3 {
font-size: 3em;
}
}
.errorBox {
&:extend(.infoBox);
color: red;
}
Stylus
Stylus w odróżnieniu od SASS umożliwia rozszerzanie wybranych jak i wszystkich zagnieżdzonych selektorów.
.infoBox
font-size: 2em
h3
font-size: 3em
//poniższy fragment jest prawidłowy (zadziała również na h3)
.errorBox
@extend .infoBox
color: red
//poniższy fragment jest prawidłowy
.specialHeader
@extend .infoBox h3
Polimorfizm w SASS i Stylus
W SASS i Stylus możemy tworzyć placeholdery, które rozszerzamy za pomocą extend
, a które same w sobie nie będą importowane do CSS i nie będą zajmować globalnej przestrzeni (style z placeholderów będą przekopiowywane do selektorów, które je rozszerzają).
%icon {
transition: background-color ease .2s;
margin: 0 .5em;
}
.error-icon {
@extend %icon;
/* error specific styles... */
}
.info-icon {
@extend %icon;
/* info specific styles... */
}
Generuje:
.error-icon, .info-icon {
transition: background-color ease .2s;
margin: 0 .5em;
}
.error-icon {
/* error specific styles... */
}
.info-icon {
/* info specific styles... */
}
Ważne są jeszcze ograniczenia z tym związane i wpływ użycia operatora @include
.
http://thesassway.com/intermediate/understanding-placeholder-selectors
Importowanie referencyjne w LESS
LESS umożliwia importowanie styli z innych plików za pomocą (reference)
. Importowane style są częściowo umieszczane w pliku tylko tam, gdzie zostały użyte do nich referencje np. za pomocą extend
, a reszta styli z importowanego pliku nie jest przekopiowywana. Z dokumentacji:
Imagine that reference marks every directive and selector with a reference flag in the imported file, imports as normal, but when the CSS is generated, "reference" selectors (as well as any media queries containing only reference selectors) are not output. reference styles will not show up in your generated CSS unless the reference styles are used as mixins or extended.
Podstawy
Definicja LESS
Zgodnie z tym co możemy znaleźć na stronie projektu, jest to swego rodzaju rozszerzenie dla CSS wprowadzające możliwość tworzenia zmiennych, funkcji i czegoś co w LESS nazywa się „mixin” (...). To sprawia, że nasze CSS’y stają się dużo łatwiejsze w utrzymaniu i o wiele bardziej rozszerzalne.
http://burczu-programator.pl/blog/wprowadzenie-do-less
Definicja SASS
SASS (Syntactical Awesome Stylesheet) jest językiem skryptowym, którego kod przetwarzany jest do plików wynikowych kaskadowych arkuszy stylów - CSS. Wprowadza on całkiem sporą liczbę udogodnień dla programisty począwszy od struktur zagnieżdżonych, poprzez mixiny, zmienne, kończąc na pętlach zarówno warunkowych jak i iteracyjnych.
SASS oferuje nam dwie składnie/konwencje kodowania.
Pierwsza wywodzi się z CSSów i nazywa się Sassy CSS (SCSS), gdzie atrybuty dla konkretnych znaczników grupowane są w klamrach i oddzielane są między sobą średnikami.
Druga konwencja składni wywodzi się z języka HAML (jest to język skryptowy dla HTML stworzony przez tych samych autorów co SASS), w którym pomijane są zarówno klamry jak i znaki oddzielające poszczególne pary atrybutów i wartości. Składa ta nazywana jest „indented” co w wolnym tłumaczeniu można przełożyć jako „ząbkowana składnia”.
http://www.dobreprogramy.pl/Simek/SASS-czyli-jak-uprzyjemnic-sobie-prace-z-CSSami-Czesc-1-Wprowadzenie,25123.html
Konwersja CSS do SASS
sass-convert --from css --to sass path/to/jquery-ui-1.8.2.custom.css > app/stylesheets/_jquery_ui.sass
Składnia SASS
Zmienne
$baseFontSize: 12px;
$baseTextColor: #3bbfce;
$baseMargin: 16px;
$basePadding: $baseMargin / 2;
body {
font-size: $baseFontSize;
}
h1 {
font-size: $baseFontSize*2;
}
p{
color: darken($baseTextColor, 9%);
margin: $baseMargin;
padding: $basePadding / 2;
}
Mixiny
@mixin container {
background-color: #ffffff;
color: #000000;
padding: 10px;
}
.box {
border: solid 1px #cc0000;
@include container;
}
.box {
border: solid 1px #cc0000;
@include container;
}
Zagnieżdżanie
#nav {
width: 800px;
list-style: none;
li {
padding: 5px;
float: left;
a {
color: #ff0000;
}
}
}
Dziedziczenie
.infoBox {
font-size: 1em;
color: black;
border-color: #e8e8e8;
}
.errorBox {
@extend .infoBox;
color: red;
}
Definicja Compass
Compass jest frameworkiem CSS3 bazującym na Sass. Oferuje szereg cech i narzędzi, które umożliwiają znaczne zredukowanie ilości pracy potrzebnej do wytworzenia kodu źródłowego. Wybrane cechy:http://www.webchili.pl/artykuly/20/zapanuj-nad-stylami-css-wprowadzenie-do-sass-i-compass
- Pełne wsparcie dla zmiennych i mixinów. Dodatkowo Compass posiada własną bibliotekę predefiniowanych mixinów.
- Funkcje do obsługi obrazów, czcionek, kolorów czy obliczeń matematycznych.
- Elastyczne narzędzia zapewniające kompatybilność z różnymi przeglądarkami. Compass sam zadba o dodanie przedrostków -webkit-, -moz czy -khtml charakterystycznych dla poszczególnych przeglądarek.
- Integracja z frameworkiem CSS Blueprint umożliwia szybkie prototypowanie i gotową stylizację elementów.