preprocesory

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




Polub fanpage BrainDesign na Facebooku aby być na bieżąco z nowymi wpisami
oraz cotygodniowymi wydarzeniami!


  • html css podstawowe różnice

    HTML vs. CSS – Podstawowe różnice

    HTML oraz CSS to podstawowe języki programowania, służące do tworzenia stron internetowych…
  • projekt Www Krok 2 przeznaczenie

    Projektujemy Stronę WWW – Krok 2: Przeznaczenie

    Projektując stronę internetową poza pomysłem ważne jest też określenie przeznaczenia stron…
Wczytaj więcej

Dodaj komentarz

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Sprawdź także

Texture w Lightroomie, czyli wydobywanie struktury ze zdjęć

Od jakiegoś czasu w Lightroomie mamy dostępne narzędzie, a właściwie suwak, który robi duż…