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!


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.

  • 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

MyPhone Prime 18×9 LTE – Testy aparatu

Podczas Festiwalu Fotografii Mobilnej YesImMobile miałem okazję testować najnowszy model m…