W dziedzinie tworzenia witryn internetowych, standardowym podejściem do nadawania wyglądu aplikacjom jest korzystanie z CSS. Niemniej jednak, CSS może sprawiać trudności, zwłaszcza gdy chodzi o identyfikowanie i naprawianie błędów.
Odkryj, jak wykorzystać potencjał Stylus CSS, alternatywnego i bardzo popularnego preprocesora CSS, który może znacznie ułatwić Ci pracę.
Czym jest preprocesor CSS?
Preprocesory CSS stanowią zbiór narzędzi, które usprawniają proces pisania kodu CSS. Często dokonują one kompilacji kodu napisanego w ich własnej, unikatowej składni, do formatu .css, który jest zrozumiały dla przeglądarek internetowych.
Preprocesory CSS, takie jak Sass, oferują specjalne funkcje, na przykład pętle, miksiny, zagnieżdżone selektory oraz instrukcje warunkowe if/else. Te udogodnienia znacząco ułatwiają zarządzanie kodem CSS, szczególnie w rozbudowanych projektach realizowanych przez duże zespoły programistów.
Aby zacząć korzystać z preprocesora CSS, konieczna jest instalacja kompilatora w Twoim środowisku lokalnym i/lub na serwerze produkcyjnym. Niektóre narzędzia do tworzenia interfejsu użytkownika, takie jak Vite, umożliwiają bezproblemowe włączenie preprocesorów CSS, w tym LessCSS, do projektu.
Jak działa Stylus CSS?
Aby zainstalować Stylus w Twoim środowisku lokalnym, musisz mieć zainstalowane Node.js oraz menedżer pakietów Node Package Manager (NPM) lub Yarn. Następnie uruchom następujące polecenie w terminalu:
npm install stylus
Lub:
yarn add stylus
Każdy plik Stylus CSS ma rozszerzenie .styl. Po utworzeniu kodu w Stylus CSS, możesz go skompilować za pomocą tego polecenia:
stylus .
Spowoduje to skompilowanie wszystkich plików .styl i wygenerowanie plików .css w bieżącym katalogu. Kompilator Stylus umożliwia również przekształcenie plików .css do formatu .styl przy użyciu flagi –css. Aby dokonać konwersji pliku .css do .styl, użyj następującego polecenia:
stylus --css style.css style.styl
Składnia i selektory nadrzędne w Stylus CSS
W standardowym CSS, blok stylu definiuje się za pomocą nawiasów klamrowych. Pominięcie tych znaków może prowadzić do nieprawidłowego działania stylów. W Stylus CSS, użycie nawiasów klamrowych jest opcjonalne.
Stylus charakteryzuje się składnią zbliżoną do Pythona, co oznacza, że bloki kodu można definiować za pomocą wcięć:
.container
margin: 10px
Powyższy kod po kompilacji da następujący wynik w CSS:
.container {
margin: 10px;
}
Podobnie jak w innych preprocesorach CSS, na przykład Less, możesz odwołać się do selektora nadrzędnego, używając znaku &:
button
color: white;
&:hover
color: yellow;
Co po kompilacji przekształci się w:
button {
color: #fff;
}button:hover {
color: #ff0;
}
Jak używać zmiennych w Stylus CSS?
W preprocesorach CSS, takich jak Less CSS, zmienne są definiowane za pomocą znaku @, podczas gdy standardowy CSS wykorzystuje znak „–” do tego celu.
Stylus stosuje nieco inne podejście: nie wymaga żadnego specjalnego symbolu do definiowania zmiennej. Wystarczy, że przypiszesz zmienną za pomocą znaku równości (=), aby powiązać ją z daną wartością:
bg-color = black
Od tego momentu możesz użyć zmiennej w pliku .styl w następujący sposób:
div
background-color: bg-color
Powyższy kod po kompilacji da następujący wynik w CSS:
div {
background-color: #000;
}
Możesz zdefiniować zmienną pustą, używając nawiasów. Na przykład:
empty-variable = ()
Do innych wartości właściwości możesz odwoływać się za pomocą symbolu @. Na przykład, jeśli chcesz ustawić wysokość elementu div na połowę jego szerokości, możesz to zrobić tak:
element-width = 563pxdiv
width: element-width
height : (element-width / 2)
To zadziała, ale możesz także całkowicie uniknąć tworzenia zmiennej i odwołać się bezpośrednio do wartości właściwości width:
div
width: 563px
height: (@width / 2)
W tym fragmencie kodu symbol @ umożliwia odwołanie się do aktualnej wartości szerokości elementu div. Niezależnie od wybranego sposobu, po skompilowaniu pliku .styl powinieneś otrzymać następujący kod CSS:
div {
width: 563px;
height: 281.5px;
}
Funkcje w Stylus CSS
W Stylus CSS możesz tworzyć własne funkcje, które zwracają wartości. Załóżmy, że chcesz, aby właściwość text-align elementu div była ustawiona na „center”, jeśli jego szerokość przekracza 400 pikseli, lub na „left”, jeśli jest mniejsza niż 400 pikseli. Możesz stworzyć funkcję, która obsłuży tę logikę.
alignCenter(n)
if (n > 400)
'center'
else if (n < 200)
'left'div {
width: 563px
text-align: alignCenter(@width)
height: (@width / 2)
}
Ten fragment kodu wywołuje funkcję alignCenter, przekazując do niej wartość właściwości width, odwołując się do niej za pomocą symbolu @. Funkcja alignCenter sprawdza, czy jej parametr n jest większy od 400, i zwraca „center”, jeśli tak. Jeśli n jest mniejsze od 200, funkcja zwraca „left”.
Po uruchomieniu kompilatora powinieneś otrzymać następujący rezultat:
div {
width: 563px;
text-align: 'center';
height: 281.5px;
}
W większości języków programowania, parametry funkcji są przypisywane na podstawie kolejności, w jakiej są wprowadzane. To może prowadzić do błędów, jeśli parametry zostaną przekazane w niewłaściwej kolejności, co jest szczególnie prawdopodobne, gdy funkcja wymaga wielu parametrów.
Stylus oferuje rozwiązanie tego problemu w postaci nazwanych parametrów. Użyj ich zamiast parametrów uporządkowanych, np.:
subtract(b:30px, a:10px)
Kiedy warto stosować preprocesor CSS?
Preprocesory CSS to potężne narzędzia, które mogą usprawnić przepływ pracy. Dobór właściwego narzędzia do projektu może pozytywnie wpłynąć na Twoją efektywność. Jeśli Twój projekt wymaga tylko niewielkiej ilości kodu CSS, korzystanie z preprocesora CSS może okazać się zbyteczne.
Jednakże, jeśli realizujesz rozbudowany projekt, szczególnie w zespole, i wiesz, że będziesz pracować z dużą ilością kodu CSS, rozważ użycie preprocesora. Oferowane przez nie funkcje, takie jak pętle, miksiny i funkcje, ułatwiają tworzenie zaawansowanych stylów.
newsblog.pl