preprocesory css

Praca ze stylami CSS to nieodłączny element tworzenia stron internetowych, który często pochłania najwięcej czasu. Można jednak wykorzystać preprocesory CSS, dzięki którym praca ta będzie szybsza i prostsza.

Czym są preprocesory CSS?

Generalnie rzecz biorąc, preprocesory CSS najczęściej określane są jako narzędzia, pozwalające nam na tworzenie oraz utrzymywanie arkuszy stylów CSS w sposób dużo lepiej zorganizowany, są czytelniejsze, prostsze oraz przede wszystkim dzięki preprocesorom, tworzenie arkuszy stylów CSS jest zdecydowanie szybsze.

Jak działają preprocesory CSS?

Niestety pisząc kod CSS z użyciem preprocesorów, nie jest on rozumiany przez przeglądarki jak standardowy plik ze stylami CSS. Przez to nasz kod musimy skompilować do kodu CSS aby działał jak należy. 🙂

Upraszczając, wygląda to tak, że piszemy kod z użyciem preprocesora, np. less, sass następnie kod jest kompilowany przez dodatkową aplikację (np. WinLess czy Koala). Skompilowany kod jest już kodem CSS, który przeglądarka odczytuje prawidłowo.

Rozszerzone możliwości stylów

Można powiedzieć, że preprocesory CSS to gratka dla programistów. Dlaczego? Ponieważ dzięki preprocesorom możemy tworzyć w CSS zmienne, które mogą zawierać różne wartości, domieszki / mixiny, które działają jak szablony do wielokrotnego użycia czy też funkcje, które przyjmują i zwracają różne wartości.

DRY – Don’t Repeat Yourself

Preprocesory CSS powstały właśnie w imię zasady DRY, czyli Don’t Repeat Yourself (Nie Powtarzaj Się). Żeby to lepiej zobrazować porównajmy poniższe fragmenty kodu:

To jest standardowy kod CSS

#content {
   width: 100%;
   height: 300px;
}

#content p {
   padding: 3px;
   color: #000;
}

#content p a {
   text-decoration: none;
   color: #333;
}

#content p a:hover {
   color: #777;
   transition: 0.3s ease-in-out;
}

Ten sam kod, zapisany z użyciem preprocesora LESS

#content {
   width: 100%;
   height: 300px; p { padding: 3px; color: #000; a { text-decoration: none; color: #333; &:hover { color: #777; transition: 0.3s ease-in-out; } } } }

Powyższy kod, napisany  użyciem LESS, po skompilowaniu wygląda dokładnie tak jak ten powyższy CSS, ale sposób tworzenia jest nieco inny – sami oceńcie, która wersja bardziej Wam odpowiada.

Najpopularniejsze preprocesory CSS

Rodzajów preprocesorów jest całkiem sporo, natomiast do najpopularniejszych z nich należą:

  • LESS,
  • SASS,
  • Stylus.

Osobiście najczęściej korzystam z LESS i tak właściwie to nie przypominam sobie abym spotkał się z np. SASS’em czy Stylus’em w miejscu innym niż ebook czy kurs video. 😉


Jeśli chodzi o podstawową wiedzę na temat preprocesorów CSS to jest to wystarczająca wiedza. Jeśli ktoś chciałby dowiedzieć się więcej na ten temat, planuję na blogu za jakiś czas opublikować kilka bardziej praktycznych wpisów na ten temat, więc zachęcam do śledzenia informacji np. na Facebooku. Osoby bardziej niecierpliwe zapraszam do umówienia się na indywidualne konsultacje / szkolenia z tego tematu. 🙂

Wczytaj więcej
Wczytaj więcej wpisów autora Wierzchu
Wczytaj więcej w CSS

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Sprawdź także

Blog za darmo, czyli publikacje bez kosztów

Wiele osób często zastanawia się, czy jest możliwe prowadzenie bloga bez ponoszenia dodatk…