Sass – wariacja na temat CSS

Poznawanie nowych technologii ma to do siebie, że oprócz podstawowej technologii, poznaje się technologie poboczne. Takim efektem ubocznym w przypadku Railsów, jest Sass – metajęzyk zbudowany w oparciu o CSS, maksymalnie upraszczający tworzenie warstwy prezentacji. Ponieważ Sass został stworzony na bazie CSS, każdy, kto choć trochę zna kaskadowe arkusze stylów, bez trudu go opanuje.

Co takiego posiada Sass, czego nie ma w CSS? Wbrew pozorom jest tego dużo. Zacznijmy od zagnieżdżeń.

#element {
  color: #ff0000;

  a {
    text-decoration: none;
  }
}

O ile powyższy przykład zagnieżdżania kodu na kolana nie powala, to następny jest czymś, czego bardzo brakuje w CSS.

a {
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

Powyższy kod spowoduje, że wszystkie znaczniki będą podkreślane tylko w momencie najechania na nie kursorem myszy. W przykładzie zastosowany został specjalny znak &, oznaczający odwołanie się do rodzica, w tym przypadku jest nim znacznik a.

Zagnieżdżanie selektorów, mimo iż pomocne, szału nie robi. Na szczęście Sass posiada o wiele większe możliwości. Kolejną potrzebną funkcjonalnością są zmienne. Pozwalają one na przechowywanie wartości, którą później można użyć w wielu elementach. Jeśli zajdzie potrzeba modyfikacji tej wartości, wówczas zamiast przeszukiwać wszystkie pliki w jej poszukiwaniu, wystarczy zmienić jedną zmienną. Najlepszym przykładem będzie tutaj kolor.

$kolor: #dbdbdb;

a {
  color: $kolor;
}

p {
  color: $kolor;
}

Kolejną ciekawą funkcjonalnością Sass są mixin, pozwalające na wielokrotne wykorzystanie tego samego kodu. Najlepszym przykładem zastosowania mixin są właściwości wymagające dodania prefiksu przez nazwą, np border-radius. Zamiast za każdym razem powtarzać ten sam kod, wystarczy zdefiniować mixin, a następnie dodać ją do selektora. Twórcy Sass byli na tyle przewidujący, że dodali do mixin możliwość definiowania wartości, które można przekazywać do mixin w postaci argumentów. Co więcej, argumenty te mogą posiadać domyślne wartości, dzięki czemu stają się jeszcze bardziej uniwersalne.

@mixin border-radius($radius: 5px) {
    border-radius: $radius;
    -moz-border-radius: $radius;
    -webkit-border-radius: $radius;
}

Teraz wystarczy tylko dołączyć mixin do selektora przy pomocy dyrektywy @include.

#jakis_element {
    @include border-radius;
}

#inny_element {
    @include border-radius(10px);
}

Na koniec pozostawiłem tzw. wisienkę na torcie. Jest nią możliwość podzielenia pliku Sass na mniejsze pliki, odwzorowujące fragmenty strony, za które odpowiadają. Ponadto możemy przenieść wszystkie zmienne i mixin do osobnego pliku, dzięki czemu nie będziemy musieli ich szukać. Następnie wystarczy utworzyć plik, w którym dołączymy wszystkie niezbędne pliki, a Sass połączy je w jeden plik.

@import "zmienne.scss";
@import "naglowek.scss";
@import "tresc.scss";
@import "stopka.scss";

Wiemy już z grubsza jakie możliwości oferuje Sass, pora dowiedzieć się jak z niego skorzystać. Przede wszystkim będziemy potrzebować Ruby’ego. Jeśli nie mamy go zainstalowanego, możemy posłużyć się instalatorem, który znajdziemy na stronie http://rubyinstaller.org/downloads/. Użytkownicy “nieokienek” prawdopodobnie mają już go zainstalowanego.

Instalacja jest banalna i sprowadza się do zainstalowania gema:

Czytaj dalej tutaj (rozwija treść wpisu)
Czytaj dalej na blogu autora...

Zwiń
Czytaj na blogu autora...