Може да сте по-запознати с други CSS препроцесори, но не пренебрегвайте този претендент.

Когато става въпрос за уеб разработка, най-често срещаният начин за стилизиране на приложение е използването на CSS. Работата с CSS обаче може да бъде тромава, тъй като е изключително трудна за отстраняване на грешки.

Научете как да използвате Stylus CSS и ще имате друга опция с един от най-популярните налични CSS препроцесори.

Какво е CSS препроцесор?

CSS препроцесорите са помощни програми, които улесняват писането на CSS. Те често компилират код от собствен персонализиран синтаксис към .css формат, който браузърите могат да разберат.

CSS препроцесорите като Sass, например, предлагат специални функции като цикли, миксини, вложени селектори и оператори if/else. Тези функции улесняват поддържането на вашия CSS код, особено в големи екипи.

За да използвате CSS процесор, трябва да инсталирате компилатора във вашата локална среда и/или производствен сървър. Някои инструменти за изграждане на интерфейс, като Vite, ви позволяват да включите CSS препроцесори като LessCSS във вашия проект.

instagram viewer

Как работи Stylus CSS

За да инсталирате Stylus във вашата локална среда, имате нужда от Node.js и от двете Мениджър на пакети на възли (NPM) или Yarn, инсталиран на вашата машина. Изпълнете следната терминална команда:

npm инсталирайте стилус

Или:

прежда добавете стилус

Всеки CSS файл на Stylus завършва с a .стил разширение. След като напишете своя CSS код на Stylus, можете да го компилирате с тази команда:

стилус .

Това трябва да компилира всички .стил файлове и изход .css файлове в текущата директория. Компилаторът Stylus също прави възможно компилирането .css файлове в .стил с --css знаме. За да конвертирате a .css файл към .стил формат, използвайте тази команда:

стилус --css стил.css стил.стил

Синтаксис и родителски селектори в Stylus CSS

В традиционния CSS дефинирате стилов блок със скоби; невключването на тези знаци ще доведе до счупени стилове. В Stylus CSS използването на скоби не е задължително.

Stylus поддържа синтаксис, подобен на Python, което означава, че можете да дефинирате блокове, като използвате вдлъбнатини вместо това, като това:

.контейнер
марж: 10px

Кодовият блок по-горе се компилира в следния CSS:

.контейнер {
марж: 10px;
}

Точно както в CSS препроцесорите като Less, можете да посочите родителски селектор с & персонаж:

бутон
цвят: бяло;
 &:задръжте
цвят: жълто;

Което се компилира до:

бутон {
цвят: #Ф ф ф;
}
бутон:задръжте {
цвят: #ff0;
}

Как да използвате променливи в Stylus CSS

В CSS препроцесори като Less CSS, вие дефинирате променливи с @ характер, докато традиционният CSS използва "--" за дефиниране на променлива.

В Stylus нещата са малко по-различни: нямате нужда от специален символ, за да дефинирате променлива. Вместо това просто дефинирайте променливата, като използвате знака за равенство (=), за да го обвържете със стойност:

бг-цвят = черен

Вече можете да използвате променливата в .стил файл като този:

див
Цвят на фона: бг-цвят

Кодовите блокове по-горе се компилират в следния CSS:

див {
Цвят на фона: #000;
}

Можете да дефинирате нулева променлива със скоби. Например:

празна променлива = ()

Можете да посочите други стойности на свойства, като използвате @ символ. Например, ако искате да зададете височината на div да бъде половината от ширината му, можете да направите следното:

ширина на елемента = 563px
див
ширина: ширина на елемента
височина: (ширина на елемента / 2)

Това би свършило работа, но можете също да избегнете създаването на променливата изцяло и да препратите към ширина стойност на свойството вместо това:

див
ширина: 563px
височина: (@ширина / 2)

В този кодов блок, @ символ ви позволява да посочите действителното ширина имот на див. Независимо от избрания от вас подход, когато компилирате .стил файл, трябва да получите следния CSS:

див {
ширина: 563px;
височина: 281.5px;
}

Функции в Stylus CSS

Можете да създавате функции, които връщат стойности в Stylus CSS. Да приемем, че искате да зададете подравняване на текст свойството на div да "центрира", ако ширина е по-голямо от 400 пиксела или „отляво“, ако ширина е по-малко от 400px. Можете да създадете функция, която обработва тази логика.

alignCenter(н)
ако (н > 400)
 'център'
другоако (н < 200)
 'наляво'
див {
ширина: 563px
подравняване на текст: alignCenter(@ширина)
височина: (@ширина / 2)
}

Този кодов блок извиква alignCenter функция, преминавайки на ширина стойност на имота, като го съпоставите с @ символ. The alignCenter функцията проверява дали нейният параметър, н, е по-голямо от 400 и връща "center", ако е така. Ако н е по-малко от 200, функцията връща "left".

Когато компилаторът работи, той трябва да произведе следния изход:

див {
ширина: 563px;
подравняване на текст: 'център';
височина: 281.5px;
}

В повечето езици за програмиране функциите задават параметри въз основа на реда, в който ги предоставяте. Това може да доведе до грешки в резултат на подаване на параметри в грешен ред, което е по-вероятно, колкото повече параметри трябва да подадете.

Stylus предлага решение: именувани параметри. Използвайте ги вместо подредени параметри, когато извиквате функция, като това:

изваждам(b:30px, а:10px)/*-20px*/

Кога да използвате CSS препроцесор

CSS препроцесорите са много мощни помощни програми, които можете да използвате, за да оптимизирате работния си процес. Изборът на правилния инструмент за вашия проект може да ви помогне да подобрите производителността си. Ако вашият проект се нуждае само от малко количество CSS, тогава използването на CSS препроцесор може да е прекалено.

Ако изграждате голям проект, може би като част от екип, който разчита на огромно количество CSS, помислете за използването на препроцесор. Те предлагат функции като функции, цикли и миксини, които улесняват стилизирането на сложни проекти.