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. 🙂

To co robi teraz jest lepsze od tego co robił pół roku temu, ale co będzie robił za pół roku będzie jeszcze lepsze niż to, co robi teraz – w każdej dziedzinie, którą się zajmuje, ponieważ jak twierdzi, jak się nie rozwija to się zwija. Uważa, że na wszystkim jesteśmy w stanie zarabiać, cokolwiek przychodzi nam do głowy, cokolwiek lubimy robić, jesteśmy w stanie mieć z tego zysk.

Artysta, autor bloga, projektant, grafik komputerowy, barista. Na codzień mieszka we Wrocławiu, prowadzi bloga BrainDesign, robi to co lubi i ma z tego frajdę. Fan pozytywnego myślenia, standupu, rozwoju osobistego oraz dobrej kawy. W wolnych chwilach łapie chwile na zdjęciach, czyta ciekawe książki, bawi się w Social Mediach, a także przegląda YouTube’a podziwiając występy sztuki Flair czy inspirujące wystąpienia z TED/TEDx’owych konferencji.

Wczytaj więcej

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…