Strona używa cookies (ciasteczek). Dowiedz się więcej o celu ich używania i zmianach ustawień. Korzystając ze strony wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki.    X

SASS – czyli jak uprzyjemnić sobie pracę z CSSami - Część 2: Trochę praktyki

Większość zaliczeń już mam z głowy, projekt w firmie na ukończeniu także w końcu mam czas, aby skrobnąć część drugą SASSego poradniko-tutoriala.
Dziś będzie praktycznie!

Nesting – zagnieżdżanie
Jedna z największych zalet SASS, dzięki zagnieżdżaniu pisanie staje się o wiele bardziej intuicyjne, a kod jest bardziej przejrzysty, a przy odpowiednim nazewnictwie pozwala uniknąć niechcianego ostylowania, bez żmudnego dodawania klasy do każdego selektora.

Przykładowy kod: po lewej SCSS, po prawej kod wynikowy CSS.

Ampersand ( & ) znajdujący się w kodzie jest odnośnikiem do rodzica bloku, czyli &:hover jest interpretowane jako tr:hover. Możemy także używać ampersanda, aby wyodrębnić jedynie nadrzędny element z dana klasą, np. w naszym wypadku &.odd oznaczało by wyróżnienie tylko elementów tr.odd.

Zmienne

Zmienne deklarujemy wg schematu: $nazwa: wartość; Przykład: $pink: #CE4DD6; $value: 16px; .cell{ padding: $value; /* 16px */ margin: $value / 2 $value * 2; /* 8px 32px */ color: $pink; /* CE4DD6 */ }Jak widać zasada jest prosta. Dodatkowo na zmiennych jak i zwykłych wartościach można wykonywać różnorakie operacje nie tylko matematyczne:$white: #fff; .black{ color: invert($white); /* #000 */ } .gray { color: grayscale(#f00); /* #808080 */ }Funkcji takich jest wiele, część dotyczy kolorów, część zmiennych, część operacji na strongach, a całą ich listę możecie znaleźć w dokumentacji.

Mixiny

Jest to kolejny feature, który skłonił mnie do używania SASS na co dzień. Mixiny to zdefiniowane przez użytkownika bloki atrybutów i wartości, które dzięki nadaniu im nazw stają się bardzo przyjemnymi, reużywalnymi własnościami.

Definiujemy je w następujący sposób: @mixin nazwaMixina($nieobowiazkowyParametr) { atrybut: wartość; atrybut: $nieobowiazkowyParametr; }

Aby skorzystać z kodu mixina w danym bloku używamy polecenia @include, np.:@mixin borderRadius($size) { -webkit-border-radius: $size; -moz-border-radius: $size; -o-border-radius: $size; border-radius: $size; } div.rounded { @include borderRadius(20px); width: 200px; }Jak widać powyżej, mixiny są bardzo podobne w działaniu do funkcji.

Możemy także zagnieżdżać mixiny w sobie, poniżej przedstawiony kod zadziała bez problemu po połączeniu kodem wypisanym wcześniej:@mixin submitButton { @include borderRadius(8px); line-height: 30px; cursor: pointer; } a.submit { @includer submitButton; }Ciekawa zaletą mixinów jest także to, że możemy swobodnie wkleić plik zawierający predefiniowane mixiny do każdego projektu, ponieważ renderowane są one dopiero w momencie ich użycia w klasie. Dobra praktyka jest raz przygotować sobie taki plik i wraz z biegiem czasu jedynie go powiększać. Przygotowałem dla was mały pliczek z najczęściej używanymi przeze mnie mixinami - do pobrania TUTAJ.

Dziedziczenie po selektorach

Kolejną ciekawą funkcją, którą oferuje SASS jest dziedziczenie po selektorach. Cała zabawa polega na tym, że oprócz dziedziczenia atrybutów dziedziczymy także wszystkie style elementów zagnieżdżonych. Dziedziczenie wywołujemy poprzez polecenie @extend np.:

Na dzień dzisiejszy to tyle. Mam nadzieję ze zaspokoiłem wasza ciekawość i odpowiedziałem na te najbardziej nurtujące pytania. Co w części trzeciej? Czas pokaże, ale ukaże się ona na pewno.

Jeśli macie jakiekolwiek pytania do tej części, możecie swobodnie zadawać je w komentarzach. 

Komentarze

0 nowych
  #1 09.06.2011 10:49

fajne. ale trzeb miec rubiego. wiec jest inne rozwiazanie http://lesscss.org/ w js

Kintoki   6 #2 09.06.2011 12:13

Hmm zamiast instalować rubi czy mieszać z wynalazkami opartymi na js nie lepiej użyć http://turbine.peterkroener.de/docs.php - pluginy dają rade.

  #3 09.06.2011 13:22

@Kintoki
Zamiast instalować PHP i z nim mieszać można użyć SASS-a albo LESS-a.
Różne produkty - różne grupy docelowe ;-)

Kintoki   6 #4 09.06.2011 16:49

@tomek_tomek no fakt można i w tą stronę :P

Simek   3 #5 09.06.2011 20:23

Oczywiście jest wiele alternatywnych rozwiązań, z LESS też się zapoznałem swego czasu, ale jednak to SASS mnie przekonał do siebie przede wszystkim konwersją w czasie rzeczywistym oraz łatwością utrzymywania porządku w większych projektach, gdzie mamy kilkanaście plików źródłowych, skatalogowanych i podzielonych dla różnych widoków, a otrzymujemy jeden skompresowany wynikowy plik ; ]

wszerad   5 #6 12.06.2011 18:48

LESS ma jeszcze jedną zaletę a mianowicie dostępność modułu dla node.js i możliwość korzystania ze zmiennych js.

djfoxer   17 #7 13.06.2011 08:58

Dziwne. Wydaje mi się, że to jest pewien przerost formy nad treścią. Ktoś większy z tego korzysta?

  #8 13.02.2015 11:36

@djfoxer: znajdź mi kogoś większego kto z tego nie korzysta...

djfoxer   17 #9 13.02.2015 16:09

@mitorski (niezalogowany): Spójrz na datę, 2011 rok, t obyło 4 lata temu... :P

Autor edytował komentarz.
  #10 08.12.2015 13:43

Strongi XD

Co to?

  #11 08.12.2015 13:47

I @includer submitButton; ?
includer?