Возможно, вы лучше знакомы с другими препроцессорами CSS, но не упускайте из виду этого претендента.

Когда дело доходит до веб-разработки, наиболее распространенным способом стилизации приложения является использование CSS. Тем не менее, CSS может быть громоздким в работе, потому что его, как известно, сложно отлаживать.

Узнайте, как использовать Stylus CSS, и у вас будет еще один вариант с одним из самых популярных доступных препроцессоров CSS.

Что такое препроцессор CSS?

Препроцессоры CSS — это утилиты, облегчающие написание CSS. Они часто компилируют код из собственного пользовательского синтаксиса в .css формат, понятный браузерам.

Препроцессоры CSS, такие как Sass, например, предлагают специальные функции, такие как циклы, примеси, вложенные селекторы и операторы if/else. Эти функции облегчают поддержку кода CSS, особенно в больших командах.

Чтобы использовать процессор CSS, вам необходимо установить компилятор в вашей локальной среде и/или на производственном сервере. Некоторые инструменты для создания внешнего интерфейса, такие как Vite, позволяют включать

instagram viewer
Препроцессоры CSS, такие как LessCSS в вашем проекте.

Как работает Stylus CSS

Чтобы установить Stylus в вашей локальной среде, вам потребуется Node.js и либо Менеджер пакетов узлов (NPM) или Yarn, установленный на вашем компьютере. Запустите следующую команду терминала:

npm установить стилус

Или:

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

Каждый CSS-файл Stylus заканчивается .стиль расширение. После того, как вы написали CSS-код Stylus, вы можете скомпилировать его с помощью этой команды:

стилус.

Это должно скомпилировать все .стиль файлы и вывод .css файлы в текущем каталоге. Компилятор Stylus также позволяет компилировать .css файлы в .стиль с --css флаг. Чтобы преобразовать .css файл в .стиль формат, используйте эту команду:

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

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

В традиционном CSS вы определяете блок стиля с помощью фигурных скобок; отказ от включения этих символов приведет к нарушению стилей. В Stylus CSS использование фигурных скобок необязательно.

Stylus поддерживает синтаксис, подобный Python, что означает, что вместо этого вы можете определять блоки, используя отступы, например:

.контейнер
допуск: 10пикс.

Приведенный выше блок кода компилируется в следующий CSS:

.контейнер {
допуск: 10пикс.;
}

Как и в препроцессорах CSS, таких как Less, вы можете ссылаться на родительский селектор с помощью & характер:

кнопка
цвет: белый;
 &:наведите
цвет: желтый;

Который компилируется в:

кнопка {
цвет: #ффф;
}
кнопка:наведите {
цвет: #ff0;
}

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

В препроцессорах CSS, таких как Less CSS, вы определяете переменные с помощью @ характер, в то время как традиционный CSS использует «--» для определения переменной.

В Stylus все немного иначе: вам не нужен специальный символ для определения переменной. Вместо этого просто определите переменную, используя знак равенства (=), чтобы привязать его к значению:

bg-цвет = черный

Теперь вы можете использовать переменную в .стиль такой файл:

див
фоновый цвет: bg-цвет

Приведенные выше блоки кода компилируются в следующий CSS:

див {
фоновый цвет: #000;
}

Вы можете определить нулевую переменную с помощью круглых скобок. Например:

пустая переменная = ()

Вы можете ссылаться на другие значения свойств, используя @ символ. Например, если вы хотите установить высоту div равной половине его ширины, вы можете сделать следующее:

ширина элемента = 563пикс.
див
ширина: ширина элемента
высота: (ширина элемента / 2)

Это сработает, но вы также можете вообще не создавать переменную и ссылаться на ширина вместо этого значение свойства:

див
ширина: 563пикс.
высота: (@ширина / 2)

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

див {
ширина: 563пикс.;
высота: 281.5px;
}

Функции в Stylus CSS

Вы можете создавать функции, которые возвращают значения в Stylus CSS. Допустим, вы хотите установить выравнивание текста свойство div в "центр", если ширина превышает 400 пикселей или "слева", если ширина меньше 400px. Вы можете создать функцию, которая обрабатывает эту логику.

выравнивание по центру(н)
если (н > 400)
 'центр'
ещеесли (н < 200)
 'левый'
див {
ширина: 563пикс.
выравнивание текста: выравнивание по центру(@ширина)
высота: (@ширина / 2)
}

Этот блок кода вызывает выравнивание по центру функция, передавая ширина значение свойства, ссылаясь на него с помощью @ символ. выравнивание по центру функция проверяет, является ли ее параметр, н, больше 400 и возвращает "центр", если это так. Если н меньше 200, функция возвращает значение «влево».

Когда компилятор запустится, он должен выдать следующий вывод:

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

В большинстве языков программирования функции назначают параметры в том порядке, в котором вы их предоставляете. Это может привести к ошибкам в результате передачи параметров в неправильном порядке, что тем более вероятно, чем больше параметров вам предстоит передать.

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

вычесть(б:30px, а:10px)/*-20px*/

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

Препроцессоры CSS — это очень мощные утилиты, которые можно использовать для оптимизации рабочего процесса. Выбор правильного инструмента для вашего проекта может помочь повысить вашу производительность. Если вашему проекту требуется лишь небольшое количество CSS, то использование препроцессора CSS может оказаться излишним.

Если вы создаете большой проект, возможно, в составе команды, который использует огромное количество CSS, рассмотрите возможность использования препроцессора. Они предлагают такие функции, как функции, циклы и примеси, которые упрощают стилизацию сложных проектов.