CSS na sterydach

Jeśli zawodowo zajmujesz się robieniem stron www to elementem, z którym nieustannie musisz się mierzyć jest czas. Każdy zleceniodawca chce by jego witryna www była wykonana bezzwłocznie, a mało kto pracuje równolegle tylko nad jednym serwisem internetowym. Z pewnością każdy web developer rozumie jak problematyczne jest opracowywanie kodu CSS tradycyjnym sposobem, zwłaszcza kiedy nieuniknione jest podawanie precyzyjniejszych reguł zagnieżdżonych jedna w kolejnej. Zaś niefortunnie nie wszystko da się zdziałać wyłącznie kodem globalnym. Okazuje się iż kłopot z tym miało więcej ludzi, więc ktoś w pewnym momencie opracował pierwszy preprocesor kodu CSS. Współcześnie jest ich już kilka, z czego zasadniczo najbardziej renomowane są SASS oraz LESS. LESS jest poręczniejszy w zastosowaniu niż SASS, toteż skupię się akurat na nim.

Preprocesor kodu CSS dopuszcza na tworzenie kodu CSS w sposób obiektowy i z zastosowaniem zmiennych, dzięki czemu da się wykonywać strony www w sposób widocznie szybszy (zobacz). Obiektem jest w tym przypadku np. blok kodu jak choćby:

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

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

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

co usprawnia ogarnięcie całością.

Możemy tworzyć też zmienne, jakie da się użytkować wielokrotnie. Zmienną tworzy się przez dodanie znaku @ na początku, np.:

@kolor-tekstu: #000;

Co możemy wykorzystać w takiej postaci:

body {
	color: @kolor-tekstu;
}

Na kolorach możemy także wykonać ciąg operacji, np. rozjaśnienie, ściemnienie, nasycenie itp. w takiej postaci:

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

spowoduje przeliczenie koloru strony na jaśniejszy o 20%. Możemy to łączyć ze zmiennymi.

To niezaprzeczalnie jedynie skubnięcie przedmiotu, lecz sądzę iż dostateczne aby zaintrygować w wystarczający sposób do indywidualnego pogłębienia tematu.