Możesz być bardziej zaznajomiony z innymi preprocesorami CSS, ale nie przeocz tego pretendenta.

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.

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 .css formacie zrozumiałym 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, pozwalają na uwzględnienie Preprocesory CSS, takie jak LessCSS w Twoim projekcie.

instagram viewer

Jak działa Stylus CSS

Aby zainstalować Stylus w środowisku lokalnym, potrzebujesz Node.js i jednego z nich Menedżer pakietów węzłów (NPM) lub Przędza zainstalowana na twojej maszynie. Uruchom następujące polecenie terminala:

npm zainstaluj rysik

Lub:

przędza dodać rysik

Każdy plik Stylus CSS kończy się na a .styl rozszerzenie. Po napisaniu kodu Stylus CSS możesz go skompilować za pomocą tego polecenia:

rysik .

To powinno skompilować wszystkie .styl pliki i dane wyjściowe .css pliki w bieżącym katalogu. Kompilator Stylus umożliwia również kompilację .css pliki do .styl z --css flaga. Aby przekonwertować .css plik do .styl sformatuj, użyj tego polecenia:

rysik --css styl.css styl.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ęć:

.pojemnik
margines: 10piks

Powyższy blok kodu kompiluje się do następującego CSS:

.pojemnik {
margines: 10piks;
}

Podobnie jak w preprocesorach CSS, takich jak Less, możesz odwołać się do selektora nadrzędnego za pomocą & postać:

przycisk
kolor: biały;
 &:unosić się
kolor: żółty;

Który kompiluje się do:

przycisk {
kolor: #ffff;
}
przycisk:unosić się {
kolor: #ff0;
}

Jak używać zmiennych w Stylus CSS

W preprocesorach CSS, takich jak Less CSS, definiuje się zmienne z rozszerzeniem @ postać, podczas gdy tradycyjny CSS używa „--” 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ć go z wartością:

kolor bg = czarny

Możesz teraz użyć zmiennej w pliku .styl taki plik:

dz
kolor tła: kolor bg

Powyższe bloki kodu kompilują się do następującego CSS:

dz {
kolor tła: #000;
}

Możesz zdefiniować zmienną pustą za pomocą nawiasów. Na przykład:

pusta zmienna = ()

Możesz odwoływać się do innych wartości właściwości za pomocą @ symbol. Na przykład, jeśli chcesz ustawić wysokość elementu div na połowę jego szerokości, możesz wykonać następujące czynności:

szerokość elementu = 563piks
dz
szerokość: szerokość elementu
wysokość: (szerokość elementu / 2)

To by zadziałało, ale możesz też całkowicie uniknąć tworzenia zmiennej i odwołać się do szerokość zamiast tego wartość właściwości:

dz
szerokość: 563piks
wysokość: (@szerokość / 2)

W tym bloku kodu plik @ symbol pozwala na odniesienie do rzeczywistego szerokość nieruchomość na dz. Niezależnie od wybranego podejścia, podczas kompilacji pliku .styl plik, powinieneś otrzymać następujący CSS:

dz {
szerokość: 563piks;
wysokość: 2810,5 piks;
}

Funkcje w Stylus CSS

Możesz tworzyć funkcje, które zwracają wartości w Stylus CSS. Powiedzmy, że chcesz ustawić wyrównanie tekstu właściwość elementu div na „centrum”, jeśli szerokość jest większy niż 400 pikseli lub „lewy”, jeśli szerokość jest mniejszy niż 400 pikseli. Możesz utworzyć funkcję, która obsługuje tę logikę.

wyrównaj do środka(N)
Jeśli (N > 400)
 'Centrum'
w przeciwnym razieJeśli (N < 200)
 'lewy'
dz {
szerokość: 563piks
wyrównanie tekstu: wyrównaj do środka(@szerokość)
wysokość: (@szerokość / 2)
}

Ten blok kodu wywołuje wyrównaj do środka funkcja, przekazując szerokość wartość właściwości, odwołując się do niej za pomocą @ symbol. The wyrównaj do środka funkcja sprawdza, czy jej parametr, N, jest większa niż 400 i zwraca wartość „centrum”, jeśli tak jest. Jeśli N jest mniejsza niż 200, funkcja zwraca „w lewo”.

Po uruchomieniu kompilator powinien wygenerować następujące dane wyjściowe:

dz {
szerokość: 563piks;
wyrównanie tekstu: 'Centrum';
wysokość: 2810,5 piks;
}

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:

odejmować(B:30px, A:10 pikseli)/*-20px*/

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.