Jeśli chodzi o tworzenie stron internetowych, najczęstszym sposobem stylizowania aplikacji jest użycie CSS. Jednak CSS może być kłopotliwy w pracy, ponieważ jest bardzo trudny do debugowania.
Dowiedz się, jak korzystać ze Stylus CSS, a będziesz miał inną opcję, z jednym z najpopularniejszych dostępnych preprocesorów CSS.
Spis treści:
Co to jest preprocesor CSS?
Preprocesory CSS to narzędzia ułatwiające pisanie CSS. Często kompilują kod z własnej niestandardowej składni do formatu .css zrozumiałego dla przeglądarek.
Na przykład preprocesory CSS, takie jak Sass, oferują specjalne funkcje, takie jak pętle, domieszki, zagnieżdżone selektory i instrukcje if/else. Te funkcje ułatwiają utrzymanie kodu CSS, szczególnie w dużych zespołach.
Aby użyć procesora CSS, musisz zainstalować kompilator w swoim lokalnym środowisku i/lub serwerze produkcyjnym. Niektóre narzędzia do budowania frontendu, takie jak Vite, umożliwiają włączenie do projektu preprocesorów CSS, takich jak LessCSS.
Jak działa Stylus CSS
Aby zainstalować Stylus w środowisku lokalnym, potrzebujesz Node.js i Node Package Manager (NPM) lub Yarn zainstalowanego na twoim komputerze. Uruchom następujące polecenie terminala:
npm install stylus
Lub:
yarn add stylus
Każdy plik Stylus CSS kończy się rozszerzeniem .styl. Po napisaniu kodu Stylus CSS możesz skompilować go za pomocą tego polecenia:
stylus .
Powinno to skompilować wszystkie pliki .styl i wygenerować pliki .css w bieżącym katalogu. Kompilator Stylus umożliwia również kompilację plików .css do .styl z flagą –css. Aby przekonwertować plik .css na format .styl, użyj tego polecenia:
stylus --css style.css style.styl
Selektory składni i rodzica w stylu CSS
W tradycyjnym CSS definiujesz blok stylu za pomocą nawiasów klamrowych; nieuwzględnienie tych znaków doprowadzi do zepsutych stylów. W Stylus CSS używanie nawiasów klamrowych jest opcjonalne.
Stylus obsługuje składnię podobną do Pythona, co oznacza, że zamiast tego można definiować bloki za pomocą wcięć:
.container
margin: 10px
Powyższy blok kodu kompiluje się do następującego CSS:
.container {
margin: 10px;
}
Podobnie jak w preprocesorach CSS, takich jak Less, możesz odwołać się do selektora nadrzędnego za pomocą znaku &:
button
color: white;
&:hover
color: yellow;
Który kompiluje się do:
button {
color: #fff;
}button:hover {
color: #ff0;
}
Jak używać zmiennych w Stylus CSS
W preprocesorach CSS, takich jak Less CSS, zmienne definiuje się za pomocą znaku @, podczas gdy tradycyjny CSS używa znaku „–” do zdefiniowania zmiennej.
W Stylusie jest trochę inaczej: nie potrzebujesz specjalnego symbolu, aby zdefiniować zmienną. Zamiast tego po prostu zdefiniuj zmienną za pomocą znaku równości (=), aby powiązać ją z wartością:
bg-color = black
Możesz teraz użyć zmiennej w pliku .styl w następujący sposób:
div
background-color: bg-color
Powyższe bloki kodu kompilują się do następującego CSS:
div {
background-color: #000;
}
Możesz zdefiniować zmienną pustą za pomocą nawiasów. Na przykład:
empty-variable = ()
Możesz odwoływać się do innych wartości właściwości za pomocą symbolu @. Na przykład, jeśli chcesz ustawić wysokość elementu div na połowę jego szerokości, możesz wykonać następujące czynności:
element-width = 563pxdiv
width: element-width
height : (element-width / 2)
To by zadziałało, ale możesz też całkowicie uniknąć tworzenia zmiennej i zamiast tego odwołać się do wartości właściwości width:
div
width: 563px
height: (@width / 2)
W tym bloku kodu symbol @ umożliwia odwołanie się do rzeczywistej właściwości szerokości elementu div. Niezależnie od wybranego podejścia, podczas kompilacji pliku .styl powinieneś otrzymać następujący CSS:
div {
width: 563px;
height: 281.5px;
}
Funkcje w Stylus CSS
Możesz tworzyć funkcje, które zwracają wartości w Stylus CSS. Powiedzmy, że chcesz ustawić właściwość text-align elementu div na „centrum”, jeśli szerokość jest większa niż 400 pikseli, lub „do lewej”, jeśli szerokość jest mniejsza niż 400 pikseli. Możesz utworzyć funkcję, która obsługuje tę logikę.
alignCenter(n)
if (n > 400)
'center'
else if (n < 200)
'left'div {
width: 563px
text-align: alignCenter(@width)
height: (@width / 2)
}
Ten blok kodu wywołuje funkcję alignCenter, przekazując wartość właściwości width przez odniesienie do niej za pomocą symbolu @. Funkcja alignCenter sprawdza, czy jej parametr n jest większy niż 400, i zwraca „centrum”, jeśli tak jest. Jeśli n jest mniejsze niż 200, funkcja zwraca „lewo”.
Po uruchomieniu kompilator powinien wygenerować następujące dane wyjściowe:
div {
width: 563px;
text-align: 'center';
height: 281.5px;
}
W większości języków programowania funkcje przypisują parametry na podstawie kolejności, w jakiej je wprowadzasz. Może to prowadzić do błędów w wyniku przekazywania parametrów w niewłaściwej kolejności, co jest tym bardziej prawdopodobne, im więcej parametrów trzeba przekazać.
Stylus zapewnia rozwiązanie: nazwane parametry. Użyj ich zamiast uporządkowanych parametrów podczas wywoływania funkcji, na przykład:
subtract(b:30px, a:10px)
Kiedy używać preprocesora CSS
Preprocesory CSS to bardzo potężne narzędzia, których można użyć do usprawnienia przepływu pracy. Wybór odpowiedniego narzędzia do projektu może pomóc zwiększyć produktywność. Jeśli Twój projekt wymaga tylko niewielkiej ilości CSS, użycie preprocesora CSS może być przesadą.
Jeśli budujesz duży projekt, być może jako część zespołu, który opiera się na ogromnej ilości CSS, rozważ użycie preprocesora. Oferują funkcje, takie jak funkcje, pętle i miksy, które ułatwiają stylizowanie złożonych projektów.