W poprzednim tekście zapoznaliśmy się z popularnymi narzędziami do edycji tekstu/kodu, wiemy jak mogą przyspieszyć i ułatwić naszą pracę, możemy więc przejść do meritum. W dzisiejszym wydaniu: preprocesory CSS!

Stack technologiczny Frontend Developera #1

A do czego jest mi to potrzebne?

Powodów jest kilka…

  1. Wiele razy zdarza się, że stylując jakiś element kopiujemy obszerne fragmenty kodu, tylko po to by zmienić w nich parę liczb czy kolorów. Owy element poza paroma wielkościami czy kolorami nie różni się bowiem wiele od wcześniej stylowanego komponentu.
  2. Mając do czynienia z naprawdę dużym zbiorem stylów dla całego serwisu możemy się zgubić, czy wpaść w konflikty z poprzednimi klasami. Bardzo ciężko jest czasami tego uniknąć.
  3. Męczy nas powtarzanie tego samego kodu cały czas. Przez mnogość znaków i selektorów kod jest nieczytelny.

No dobra, to co to tak właściwie jest?

Preprocesor to narzędzie, które swoją unikalną składnię kompiluje do standardowego CSS-a. Implementuje schematy elementów za pomocą mixin lub funkcji, a w zmiennych trzyma wartości rozmiarów, odcienie kolorów.

Pozwala tym samym na znacznie wygodniejszą pracę z arkuszami stylów.

Warto wspomnieć, że jest to przyrząd dla developerów, jego składnia nie jest zrozumiała dla przeglądarki. Musimy więc przetłumaczyć to co napisaliśmy na kod CSS poprzez kompilację, a narzędzie do tego musimy skonfigurować sobie sami. Nie jest to skomplikowany proces, istnieje wiele gotowych i zautomatyzowanych rozwiązań, a kilka z nich omówimy sobie w następnych odcinkach serii Stacku przy okazji przedstawiania takich technologii jak Gulp czy Grunt. Mnogość udogodnień jaka płynie z korzystania z preprocesorów CSS na pewno wynagrodzi nam ten wkład. Na razie dodam, że serwisy JSFiddle i CodePen oferują możliwość pisania w składni popularnych preprocesorów i podglądania skompilowanego CSS-a, zatem zachęcam do testowania i przepisywania tam CSS-a na np. SCSS-a.
 1

Przed Wami krótki przegląd trzech najpopularniejszych w tej chwili preprocesorów wraz ze zwięzłym kawałkiem kodu w różnych składniach:

  1. Sass

2

Prekursor dzisiejszych preprocesorów oparty na Rubym, historia jego powstania sięga 2006 roku. Sass umożliwia nam korzystanie m.in. ze zmiennych, mixinów, dziedziczenia selektorów.

Obecnie możemy używać dwóch składni:

  • Sass: oryginalna, bez klamer i średników
  • SCSS (Sassy CSS): nowa, główna składnia, będąca rozszerzeniem CSS-a (każdy CSS jest prawidłową składnią SCSS)

Sass:

[css]

$size: 2rem
$opacity: 1
$bg-color: rgba(255, 255, 203, $opacity)
$lion-color: rgba(0, 0, 0, $opacity)

@mixin basic-circle($circle-size, $left, $top, $background)
width: $circle-size * $size
height: $circle-size * $size
left: $left * $size
top: $top * $size
background: $background

#crown
@include basic-circle(.5, 0, -.6, $lion-color)

#cut-one
@include basic-circle(.3, 0, -.75, $bg-color)
[/css]

 

SCSS:

[css]

$size: 2rem;
$opacity: 1;
$bg-color: rgba(255, 255, 203, $opacity);
$lion-color: rgba(0, 0, 0, $opacity);

@mixin basic-circle($circle-size, $left, $top, $background) {
width: $circle-size * $size;
height: $circle-size * $size;
left: $left * $size;
top: $top * $size;
background: $background;
}

#crown {
@include basic-circle(.5, 0, -.6, $lion-color);
}

#cut-one {
@include basic-circle(.3, 0, -.75, $bg-color);
}

[/css]

Legenda:

$ – poprzez znak dolara oznacza się w Sassie zmienne, ich wartość deklarujemy za pomocą dwukropka, jak w przypadku zwykłych własności CSS; jak widać w przypadku np. zmienne $bg-color deklaracje mogą korzystać z wcześniej już zdefiniowanych zmiennych

@mixin nazwa_mixiny(parametr1, parametr2, …) – tak oznacza się w Sassie kod do wielokrotnego użytku, który przyjmuje parametry, możemy zatem fragmenty kodu różniące się jedynie paroma wartościami zastąpić jedną mixiną

@include nazwa_mixiny(…) – wykorzystanie wcześniej zdefiniowanej mixiny z konkretnymi wartościami, własności zadeklarowane w mixinie wraz z odpowiednimi wartościami dopisywane są do deklaracji selektora

Sass udostępnia szereg funkcji umożliwiających np. rozjaśnianie, przyciemnianie kolorów o % np. darken(red, 10%), operacje matematyczne i wiele innych.

Po kompletny spis funkcjonalności i instrukcję kompilacji do CSS odsyłam do dokumentacji Sassa.

Sassa możecie przetestować online tutaj: https://www.sassmeister.com/

Technologie/firmy korzystające z Sassa:

Bootstrap 4, Github, CodePen

  1. Less.js

less

Główny konkurent Sassa, różni się znacząco składnią i zamysłem inżynierskim. Zaletą tego preprocesora jest możliwość załączania go bezpośrednio w przeglądarce bez kompilacji za pomocą JavaScriptu, który to zajmuje się tłumaczeniem składni.

[css]
@size: 2rem;
@opacity: 1;
@bg-color: rgba(255, 255, 203, @opacity);
@lion-color: rgba(0, 0, 0, @opacity);

.basic-circle(@circle-size, @left, @top, @background) {
width: @circle-size * @size;
height: @circle-size * @size;
left: @left * @size;
top: @top * @size;
background: @background;
}

#crown {
.basic-circle(.5, 0, -.6, @lion-color);
}

#cut-one {
.basic-circle(.3, 0, -.75, @bg-color);
}
[/css]

Legenda:

@ – inna notacja zmiennych niż $ Sassa

brak słowów mixin/include – Less rozumie, że „klasa” jest mixiną jeśli posiada nawiasy po swojej nazwie i możemy jej używać, gdy podamy już konkretne wartości w nawiasach

Dokumentacja Lessa dostępna jest tutaj, a przetestować go możecie tu: https://less2css.org/

Technologie/firmy korzystające z Lessa:

Bootstrap 3, Medium, Trello

  1. Stylus

stylus

Niejako połączenie możliwości Sassa i Lessa. Przecinki, średniki i nawiasy klamrowe są opcjonalne, dzięki czemu możemy pisać nasz kod na wiele sposobów, tak jak lubimy. Dzieje się tak poprzez wcięcia – to one podobnie jak w Pythonie, są tutaj wyznacznikiem bloku. Można nawet pomijać dwukropki i nadal będzie to poprawna składnia!

[css]
$size = 2rem
$opacity = 1
$bg-color = rgba(255, 255, 203, $opacity)
$lion-color = rgba(0, 0, 0, $opacity)

basic-circle($circle-size, $left, $top, $background)
width $circle-size * $size
height $circle-size * $size
left $left * $size
top $top * $size
background $background

#crown
basic-circle(.5, 0, -.6, $lion-color)

#cut-one
basic-circle(.3, 0, -.75, $bg-color)
[/css]

Legenda:

tutaj znając legendy Sassa i Lessa powininniście rozumieć już składnię :)

Do poczytania tutaj.

Do wypróbowania online: https://stylus-lang.com/try.html

Technologie/firmy korzystające ze Stylusa:

Virtus.Pro, Coursera

Są też oczywiście minusy korzystania z preprocesorów, np. przy debugowaniu kodu musimy korzystać z source map, inaczej nie odnajdziejmy interesującej nas właśności w stylach. To kolejna technologia do nauczenia, różne firmy korzystają z różnych preprocesorów itd. Jednak naprawdę warto doświadczyć możliwości któregoś z preprocesorów, bo ich używanie niesie potężne bonusy.

No to który preprocesor CSS mam wybrać?

Szybka odpowiedź: dowolny. A to dlatego, że wszystkie wspomniane preprocesory mają jeden wspólny cel: rozwiązywać problemy i zwiększać wygodę pisania CSS

  • za pomocą zmiennych pozwalają uniknąć modyfikowania jednej wartości w wielu miejscach naraz
  • upraszczają powtarzanie kodu za pomocą mixin/funkcji
  • zapewniają większą czytelność kodu poprzez możliwość zagnieżdżania selektorów i omijanie niektórych znaków (np. przecinków, średników, klamer)
  • umożliwiają modularyzację kodu (więcej mniejszych plików łatwiejszych w utrzymaniu niż jeden ogromny zbiór wszystkich stylów)
  • istnieją liczne kolekcje pluginów, dzięki którym możemy rozszerzać ich możliwości odpowiednio do naszych potrzeb

Osiągają to z wykorzystaniem innych składni, ideologii, ale cel nadal mają ten sam. Warto zatem spróbować każdego, wybrać swój ulubiony i jeszcze efektywniej pracować z naszym CSS-em :)

Jaki jest Wasz ulubiony preprocesor? Co cenicie w nim najbardziej? Podzielcie się w komentarzach!

O autorze

Filip Konieczny – student drugiego roku Informatyki na Politechnice Warszawskiej. Fanatyk programowania, w szczególności JS’a. Na tym polu jego podstawowa technika bojowa składa się z uczenia nowych rzeczy i robienia wszystkiego samemu.

TEMATY:
Najświeższe artykuły