Preprocesory CSS to narzędzia, które znacznie ułatwiają wytwarzanie kodu arkuszy stylów. Ich działanie polega na umożliwieniu użytkownikowi korzystania z udogodnień na etapie pisania kodu, który po kompilacji staje się klasyczną, pełnoprawną zawartością pliku *.css. Jedne z bardziej popularnych preprocesorów to Sass oraz Less. W tym wpisie głównie skupię się na Sassie, ponieważ z tego rozwiązania korzystają frameworki takie jak Bootstrap czy Materialize.
Spis treści
- A na co to komu?
- Zasada działania
- Sassy CSS
- Instalacja Sass
- Zmienne
- Zagnieżdżanie stylów
- Mixiny
- Operatory arytmetyczne
- To wszystko i więcej
A na co to komu?
Mnogość narzędzi, które mają ułatwiać życie programistów front-end jest już legendarna, w sieci pełno jest memów np. w tematyce nowych frameworków JS, a żartom i dowcipom nie ma końca.
Jestem jednak niemal pewna, że większość osób, które mają doświadczenie w pisaniu lub utrzymywaniu sporego projektu zdaje sobie sprawę jak upierdliwe potrafi być np. przekopywanie się przez arkusze stylów i debugowanie kodu w poszukiwaniu tej jednej właściwej linijki. Oczywiście pojawienie się narzędzi deweloperskich w przeglądarkach znacznie ułatwia sprawę, można jednak pomóc sobie już na etapie wytwarzania CSSów.
Zasada działania
Zasada działania preprocesorów CSS jest banalnie prosta i sprowadza się do tego, co napisałam w leadzie artykułu: tworzymy style korzystając z wybranej składni w pliku o odpowiednim rozszerzeniu, potem następuje proces kompilacji, którego efektem jest pełnoprawny kod CSS. Przeglądarki nie będą potrafiły zastosować stylów napisanych przy użyciu Less czy Sass bez uprzedniej kompilacji.
Sam proces kompilowania może odbywać się w locie lub na żądanie. Wersja w locie oznacza, że po każdej aktualizacji wskazanych plików kompilator uruchomi się samoczynnie a otwarta w przeglądarce strona/aplikacja przeładuje się (najczęściej). Służy do tego flaga --watch. Kompilator można również uruchomić ręcznie w wybranym przez siebie momencie.
Sassy CSS
Jedną z możliwości jest wykorzystanie preprocesora Sass, czyli Syntactically Awesome Style Sheets – w wolnym tłumaczeniu: składniowo niesamowite arkusze stylów 😉 Co do samej składni to Sass udostępnia ją w dwóch wersjach, Sass oraz SCSS, które są jednocześnie rozszerzeniami plików ze stylami. Z grubsza główna różnica polega na tym, że w SCSS korzystamy ze średników i nawiasów klamrowych, natomiast w Sass zamiast nawiasów i średników stosuje się wcięcia i białe znaki. Osobiście preferuję SCSS, ponieważ bardziej przypomina składnię CSS i to z tej wersji będę korzystać w przykładach.
Instalacja Sass
Żeby móc korzystać z dobrodziejstw Sassa należy go najpierw go zainstalować. Można to zrobić na kilka sposobów, np. wybierając osobną aplikację do kompilacji dla swojego systemu operacyjnego, czy też za pośrednictwem wiersza poleceń lub konsoli systemowej. Możliwe procesy instalacji Sassa są opisane tutaj.
Z Sassa można również korzystać przy okazji pracy z frameworkami JS. Dla przykładu: w Angularze istnieje możliwość wykorzystania CLI do takiej konfiguracji, żeby domyślnymi plikami stylów były .scss czy też .sass lub .less. Więcej informacji na ten temat dostarcza ten artykuł.
Zmienne
Zmienne w języku CSS funkcjonują już od dłuższego czasu, da się je zadeklarować przy pomocy pseudoklasy :root i wykorzystać przy pomocy funkcji var(). Problemów z ich wykorzystaniem może jednak nastręczać brak wsparcia dla przeglądarek Internet Explorer czy Opera Mini.
Deklaracja zmiennych w SCSS jest banalnie prosta: należy przed nazwą zmiennej umieścić symbol $ i voila!
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}jest ekwiwalentem w CSS kodu:
body {
font: 100% Helvetica, sans-serif;
color: #333;
}Zmienne świetnie nadają się np. do deklarowania palety kolorystycznej na stronie/aplikacji. Jeżeli kiedyś zajdzie potrzeba zmiany koloru, to nie trzeba we wszystkich miejscach podmieniać wartości, a jedynie zmienić wartość przypisaną do zmiennej.
Zagnieżdżanie stylów
Sass daje możliwość bardzo czytelnego zagnieżdżania stylów, które oddaje hierarchię zagnieżdżonych elementów HTML. Poniższy kod CSS
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}można zapisać bardziej w przyjazny czytelnikowi sposób w SCSS:
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}Mixiny
Mixin to grupa deklaracji CSS, którą można zastosować w wielu miejscach. Jeżeli pewnej grupy deklaracji używamy kolejny raz, to można ją śmiało zadeklarować jako mixin:
@mixin button {
width: 100%;
border: 1px solid black;
margin-bottom: 0.25rem;
}Mixiny wykorzystujemy przy użyciu @include:
.my-button {
background-color: red;
@include button;
}Istnieje również możliwość przekazywania argumentów do mixinów:
@mixin transform($property) {
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}Przykład użycia:
.box {
@include transform(rotate(30deg));
}Operatory arytmetyczne
Czasami określenie konkretnej wartości liczbowej dla konkretnej właściwości może być trudne i jedynym rozwiązaniem problemu okazują się obliczenia arytmetyczne. CSS dostarcza oczywiście rozwiązanie w postaci funkcji calc(), tutaj jednak – podobnie jak w przypadku zmiennych – problemem może okazać się wsparcie przeglądarek. Sass umożliwia wykorzystywanie operatorów arytmetycznych bez konieczności użycia specjalnych słów kluczowych czy wywoływania funkcji, np.
.container {
width: 100%;
}
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
aside[role="complementary"] {
float: right;
width: 300px / 960px * 100%;
}To wszystko i wiele więcej
Oczywiście podane powyżej przykłady w żaden sposób nie wyczerpują potencjału drzemiącego w Sassie. Ciekawych odsyłam do dokumentacji, a zainteresowanych alternatywą w postaci Lessa odsyłam tutaj.