Nowości

Wprowadzenie do Preprocesorów CSS

Jeśli na co dzień tworzysz strony internetowe, czy to komercyjnie, czy jako hobby, zapewne słyszałeś już w przeciągu kilku ostatnich miesięcy frazy takie jak…

Jeśli na co dzień tworzysz strony internetowe, czy to komercyjnie, czy jako hobby, zapewne słyszałeś już w przeciągu kilku ostatnich miesięcy frazy takie jak „LESS” czy „SASS”. W tym wpisie wytłumaczę krótko o co tyle szumu i czy warto się tematem zainteresować… choć może na drugie pytanie odpowiem od razu – warto!

medium
Kompletny kurs Preprocesorów CSS znajdziesz na http://eduweb.pl/kursy/css/preprocesory-sass-less.html

LESS oraz SASS (a także kilka innych) to tak zwane preprocesory CSS, czyli narzędzia, które pozwalają nam pisać kod CSS, który dzięki ich dobroci oferuje nieznane nam dotąd możliwości. Mówiąc „piszę w SASS czy LESS” mówimy „piszę kod CSS”. Oznacza to tylko tyle, że jeśli potrafisz pisać poprawny kod CSS, to również potrafisz napisać poprawny kod używając preprocesora. Dzieje się tak dlatego, że cała składnia CSS jest interpretowana jako poprawny kod przez preprocesory, a oprócz tego możemy posłużyć się wieloma dodatkowymi poleceniami, które już w „czystym” CSS nie były by poprawne.

Jak zatem działają preprocesory CSS?

Bardzo prosto! Najpierw tworzymy nowy plik z odpowiednim rozszerzeniem (np. .scss), a następnie piszemy w nim kod CSS, używając dodatkowych możliwości oferowanych przez wybraną implementację. Jak się domyślasz, plik z tego typu rozszerzeniem nie mógłby zostać poprawnie wczytany i zinterpretowany przez przeglądarkę, zatem musimy go najpierw zamienić na wynikowy kod CSS. I tutaj drogi są zazwyczaj dwie. Jedna z nich to jednorazowa kompilacja pliku (np. .scss) do pliku .css i podpięcie wynikowego pliku do przeglądarki, a druga, dużo bardziej przydatna, to dodanie pliku do śledzenia przez wiesz poleceń lub program typu GUI np. Koala.

W drugim przypadku praca przebiega dużo płynniej, gdyż za każdym razem gdy zapiszemy plik, nad którym pracujemy, program skompiluje go do kodu CSS, który już wcześniej podłączyliśmy do przeglądarki. Zatem wszystko co musimy zrobić, to dodać plik .less czy .scss do śledzenia (ustawiając przy tym gdzie ma zostać zapisany plik .css), a następnie podpiąć wynikowy plik .css do przeglądarki. Wówczas pracujemy dokładnie tak samo jak w „zwykłym” kodzie CSS, jednak pomijamy edycję pliku z takim właśnie rozszerzeniem oraz mamy dużo większe pole do popisu.

Ok, teorię mamy już za sobą, a więc przyjrzyjmy się prostemu przykładowi,  w którym najpierw wstawimy standardowy link do pliku CSS w elemencie head naszej strony:

<link href="css/style.css" rel="stylesheet">

a następnie stworzymy nowy plik z rozszerzeniem .scss i dodamy go do śledzenia w programie Koala przeciągając go po prostu na znaczek plusa:

koala_app

Teraz już możemy napisać kod używając preprocesora. W tym przykładzie posłużymy się cechą preprocesorów, która zwana jest zagnieżdżonymi regułami i pozwala niesamowicie przyspieszyć pracę. Spójrzmy na przykład kodu CSS, który niczym Cię nie zaskoczy:

#mainHeader {
    width: 940px;
    overflow: hidden;
}

#mainHeader h1 {
    font-size: 24px;
    color: #fff;
    text-shadow: 1px 1px 0 #000;
}

#mainHeader h1 span {
    font-size: 20px;
}

#mainHeader a {
    color: #eee;
}

#mainHeader a:hover {
    color: red;
}

Jak widzisz, jest to standardowy kod CSS, a zatem przekształćmy go na czytelniejszy i szybszy w zapisie kod w SCSS:

#mainHeader {
    width: 940px;
    overflow: hidden;

    h1 {
        font-size: 24px;
        color: #fff;
        text-shadow: 1px 1px 0 #000;

        span {
            font-size: 20px;
        }
    }

    a {
        color: #eee;

        &:hover {
            color: red;
        }
    }
}

Po zapisaniu pliku, który dodaliśmy wcześniej do śledzenia, program automatycznie skompiluje jego zawartość do poprawnego kodu CSS, w pliku który podpięliśmy do przeglądarki, aby ta mogła wyświetlić stronę według naszej intencji:

#mainHeader {
  width: 940px;
  overflow: hidden; }
  #mainHeader h1 {
    font-size: 24px;
    color: #fff;
    text-shadow: 1px 1px 0 #000; }
    #mainHeader h1 span {
      font-size: 20px; }
  #mainHeader a {
    color: #eee; }
    #mainHeader a:hover {
      color: red; }

Co zatem się stało? Zagnieździliśmy sobie po prostu wszystkie selektory, które chcemy zawrzeć wewnątrz #mainHeader i mogliśmy to napisać dużo szybciej, nie wpisując ponownie #mainHeader lub nie kopiując tego właśnie selektora. SASS i tak skompilował to do kodu, który widzieliśmy wyżej, bo zapis w formie zagnieżdżonej nie byłby poprawny w przeglądarce. Ale dla nas od dzisiaj jest jak najbardziej poprawny, gdyż program kompilujący nie miał z nim żadnych problemów. Różnica w wyglądzie powyższego wynikowego kodu CSS to jedynie sposób formatowania (wcięcia, nowe linie), na który mamy wpływ z poziomu ustawień poszczególnych preprocesorów.

Jeśli chodzi o zagnieżdżone reguły, to mamy tutaj oczywiście więcej możliwości i choć preprocesory takie jak LESS czy SASS oferują nam jeszcze wiele innych, świetnych rozwiązań, to powiem Ci szczerze już teraz, że gdybyś używał ich wyłącznie do pisania w formie zagnieżdżonych reguł, nie mógłbyś już nigdy wrócić do pisania standardowego kodu CSS, a czas, który byś zaoszczędził, spożytkowałbyś na pewno w ciekawszy sposób!

Ale jak już wspomniałem, zagnieżdżone reguły to nie wszystko co mają nam do zaoferowania preprocesory CSS, gdyż dzięki nim mamy do dyspozycji wiele konstrukcji, zaczerpniętych do CSS wprost z klasycznych języków programowania. Są to między innymi zmienne, dzięki którym możemy raz przypisać do zmiennej wartość np.

$kolor: #ff0000;

a następnie wstawić ją w każde miejsce, gdzie chcemy aby taki kolor się pojawił. Idąc dalej, otrzymujemy instrukcje warunkowe, pętle, funkcje (w tym niesamowite funkcje kolorów), mixiny czy choćby możliwość importowania plików.

Dzięki preprocesorom zyskujemy przede wszystkim czas, ale także tworzymy dużo lepiej zorganizowane projekty, w których nie musimy patrzyć na tony kodu typu:

a {
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

a zamiast tego wpisujemy np.

a {
    @include transition;
}

Podsumowanie

Ten artykuł miał na celu wyjaśnić podstawową ideę działania tych narzędzi oraz zachęcić do ich poznania, gdyż najtrudniej wykonać jest pierwszy krok, jakim jest sięgnięcie po nie i poświęcenie tak naprawdę niewielkiej ilości czasu na ich przyswojenie, a później już – gwarantuję – nie ma drogi powrotnej i każdy moment, w którym musimy otworzyć do edycji standardowo napisany kod CSS wydaje się zwyczajną stratą czasu.

Jeśli zatem tworzysz strony internetowe oraz cenisz swój czas i masz już dość pisania standardowego kodu CSS, pełnego powtórzeń i nieustannego wciskania klawiszy CTRL+C, CTRL+V, mamy dla Ciebie dobrą wiadomość!

UWAGA! Kompletny kurs wideo Preprocesorów CSS znajdziesz na http://eduweb.pl/kursy/css/preprocesory-sass-less.html

Wspomniałem wcześniej, że preprocesory wprowadzają do naszego kodu CSS zagadnienia programistyczne, ale nie martw się jeśli nigdy nie programowałeś w żadnym z języków. Aby przystąpić do kursu musisz mieć jedynie podstawową wiedzę z zakresu HTML i CSS, a wszystkie zagadnienia takie jak instrukcje warunkowe czy pętle zostaną dokładnie wytłumaczone.

Jeśli idea tworzenia stron internetowych w sposób lepiej zorganizowany, bardziej profesjonalny i co chyba najważniejsze szybszy wystarczająco Ci się podoba, być może usłyszymy się już niebawem!

UDOSTĘPNIJ ARTYKUŁ:

Powiązane artykuły

Darmowe

10 portali dla designerów – część I

Nowości

Już wkrótce – premiera Kursu Adobe Illustrator CC – Techniki Zaawansowane!

Nowości

Kurs InVision Studio już wkrótce!

Pozostań na bieżąco!

Już nigdy nie przegapisz ważnych informacji, promocji oraz nowych kursów. Zapisz się na newsletter już teraz!

Zapisując się do newslettera akceptujesz naszą politykę prywatności