Repozytorium Web Developera

LESS, 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:
  • 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.
http://www.webchili.pl/artykuly/20/zapanuj-nad-stylami-css-wprowadzenie-do-sass-i-compass