CSS na sterydach

Kiedy zawodowo zaangażujesz się w robienie stron www elementem, z jakim nieustannie musisz się uporać jest czas. Każdy kontrahent chce żeby jego serwis www był wykonany jak najspieszniej, zaś mało kto pracuje równolegle tylko nad pojedynczą stroną www. Na pewno każdy web developer wie jak problematyczne jest konstruowanie kodu CSS tradycyjnym trybem, zwłaszcza kiedy niezbędne jest wyrażanie dokładniejszych reguł zagnieżdżonych jedna w kolejnej. A nieszczęśliwie nie wszystko można zdziałać tylko kodem globalnym. Jak się okazuje kłopot z tym miało więcej osób i ktoś w pewnym momencie opracował pierwszy preprocesor kodu CSS. Dzisiaj jest ich już kilka, z czego zasadniczo rozpowszechnione są SASS oraz LESS. LESS jest łatwiejszy w zastosowaniu aniżeli SASS więc zajmę się właśnie nim.

Preprocesor kodu CSS zezwala na przygotowywanie kodu CSS w sposób obiektowy i z zastosowaniem zmiennych, dzięki czemu możemy tworzyć strony internetowe w sposób wyraźnie szybszy. Obiektem jest w tym wypadku np. blok kodu jak choćby:

.naglowek {
    width: 100%;
    .logo {
    float: left;
    }
    .menu {
    float: right;
    }
}

po skompilowaniu taki kod będzie przekształcony na:

.naglowek {
    width: 100%;
}
.naglowek .logo {
    float: left;
}
.naglowek .menu {
    float: right;
}

co ułatwia zapanowanie nad całością.

Możemy wyznaczać również zmienne, jakie można używać wielekroć. Zmienną zaczyna się przez dopisanie symbolu @ na początku, np.:

@kolor-tekstu: #000;

Co możemy wykorzystać w tej postaci:

body {
    color: @kolor-tekstu;
}

Na kolorach możemy również wykonać szereg manipulacji, np. pojaśnienie, pociemnienie, saturacja itp. w tego rodzaju formie:

body {
    color: lighten(@kolor-tekstu, 20%);
}

spowoduje przeliczenie koloru tekstu na 20% jaśniejszy.

To niewątpliwie tylko liźnięcie wątku, jednak przypuszczam że wystarczające aby zafascynować w wystarczający sposób do samoistnego uszczegółowienia tematu.