Właściwość #1: Zmienne
Różne klasy CSS mogą zawierać tą samą regułę lub reguły w projekcie. Na przykład, mamy 20 pól na naszej stronie internetowej z różnymi kolorami tła:
.box-1 {
width: 100px;
height: 100px;
background: red;
}.box-2 {
width: 100px;
height: 100px;
background: yellow;
}....box-20 {
width: 100px;
height: 100px;
background: blue;
}
Później nasz klient zmienia zdanie i chce mieć większe pola. Muszę więc zwiększyć właściwości width i height każdej klasy jedna po drugiej. Może to być również 50 klas. W prawdziwym życiu programistycznym może to być frustrujące. Jak wspomniałem wyżej, jest to przykład dużego wysiłku dla małych zmian.
Jak możemy to zrobić bardziej efektywnie?
Sass dostarcza rozwiązanie: zmienne. Podobnie jak w innych językach programowania, możemy używać zmiennych do przechowywania wartości i ponownego ich użycia.
Definicja zmiennej:
$variable-name: value;
Powracając do przykładu powyżej, jeśli zdefiniujemy zmienne dla width & height :
$box-width: 100px;
$box-height: 100px;
później, gdy potrzebna jest zmiana, musimy tylko raz zmienić ich wartości:
$box-width: 200px; // changed from 100px to 200px
$box-height: 200px; // that's all!.box-1 {
width: $box-width; // using variables now instead of pixels
height: $box-height;
background: red;
}.box-2 {
width: $box-width;
height: $box-height;
background: yellow;
}....box-20 {
width: $box-width;
height: $box-height;
background: blue;
}
Sam CSS również obsługuje teraz zmienne, ale nie działa to w IE & stare wersje innych przeglądarek:
Feature #2: Nesting
Standardowy CSS nie obsługuje zagnieżdżania. Nie możemy napisać klasy wewnątrz innej klasy. Gdy projekt staje się większy, powoduje to problem z czytelnością, a struktura nie wygląda ładnie.
Na przykład, zdefiniujmy menu nawigacyjne z klikalnymi linkami w HTML poniżej:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
HTML obsługuje zagnieżdżony kod. Jednak bez zagnieżdżania, wyglądają one tak w CSS:
Musieliśmy napisać nav dla każdego tagu, nawet dla pseudoklasy kotwicy (hover), ponieważ nav jest tagiem nadrzędnym dla wszystkich. Sass jednak wspiera zagnieżdżanie:
Tutaj możemy pisać lepiej zorganizowany kod jak w HTML. Nie musimy pisać navklasy za klasą, co również zapobiega nadmiarowości
Ważne: Nie zaleca się zagnieżdżania klas głębiej niż 3 poziomy.
Feature #3: Mixins
Dowiedzieliśmy się powyżej jak używać zmiennych dla reguł CSS. Ale co jeśli potrzebujemy użyć grupy reguł razem? Sass posiada funkcję zwaną mixinami, pozwalającą nam to zrobić.
Co to jest mixin?
Mixiny są funkcjami Sass, które grupują razem deklaracje CSS. Możemy je później ponownie wykorzystać jak zmienne.
Mixin możemy utworzyć za pomocą polecenia @ mixin, po którym podajemy nazwę:
@mixin my-font {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
}
lub możemy utworzyć mixin jako funkcję i również dodać parametry:
$font-color: red;@mixin my-font($font-color) {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
color: $font-color;
}
Po utworzeniu mixina, możemy go użyć w dowolnej klasie za pomocą polecenia @ include. Tak więc możemy użyć mixina my-font zamiast 4 linii reguł czcionek za każdym razem. Takie podejście upraszcza kod.
p {
@include my-font;
}
Używanie mixinów jest dobrym sposobem na zapobieganie redundancji kodu.
Feature #4: Importy
Wreszcie, możemy pociąć nasze ogromne pliki CSS na mniejsze kawałki dzięki funkcji importu Sass. Jest o wiele łatwiej czytać & utrzymanie mniejszych plików niż jeden duży plik z niekończącymi się liniami.
Faktycznie, CSS również posiada teraz funkcję importu. Ale działa ona inaczej. CSS wysyła żądanie HTTP do serwera za każdym razem, aby zaimportować plik. Sass robi to bez żądania HTTP, co jest szybszym podejściem.
Wszystko co musisz zrobić, to zaimportować swój plik Sass za pomocą polecenia @ import do innego pliku Sass:
// Your main Sass file@import 'file';
@import 'anotherFile';.class {
// Your code
}
Nie musimy używać rozszerzenia .scss w ścieżce pliku, Sass to zrozumie.
.