У світі веб-розробки, CSS є найпоширенішим інструментом для стилізації веб-сторінок. Проте, CSS може бути складним у використанні, особливо коли мова йде про налагодження.
Ознайомлення з Stylus CSS відкриває альтернативний підхід, пропонуючи один з популярних CSS препроцесорів.
Що таке препроцесор CSS?
Препроцесори CSS – це інструменти, які спрощують процес написання CSS. Зазвичай, вони компілюють код із власного унікального синтаксису в формат .css, який розуміють браузери.
Препроцесори CSS, такі як Sass, надають спеціальні можливості, зокрема цикли, міксини, вкладені селектори та умовні оператори if/else. Ці функції полегшують підтримку CSS коду, особливо у великих командах розробників.
Для застосування препроцесора CSS необхідно встановити компілятор у вашому локальному середовищі або на робочому сервері. Деякі інструменти для збірки інтерфейсу, наприклад Vite, дають можливість інтегрувати CSS препроцесори, такі як LessCSS, у ваші проєкти.
Як працює Stylus CSS
Щоб встановити Stylus у вашому локальному середовищі, переконайтеся, що Node.js та Node Package Manager (NPM) або Yarn вже інстальовані. Виконайте наступну команду в терміналі:
npm install stylus
або:
yarn add stylus
Кожен CSS файл Stylus має розширення .styl. Після написання коду Stylus, його можна скомпілювати за допомогою команди:
stylus .
Ця команда скомпілює всі .styl файли і створить відповідні .css файли в поточній директорії. Компілятор Stylus також дозволяє перетворювати .css файли в .styl, використовуючи опцію –css. Для конвертації файлу .css у формат .styl, застосуйте наступну команду:
stylus --css style.css style.styl
Синтаксис і батьківські селектори в Stylus CSS
У стандартному CSS визначення стильового блоку відбувається за допомогою фігурних дужок. Їх відсутність призведе до неправильної роботи стилів. В Stylus CSS використання фігурних дужок є необов’язковим.
Stylus підтримує синтаксис, схожий на Python, що означає, що блоки коду можна визначати за допомогою відступів, наприклад:
.container
margin: 10px
Цей фрагмент коду буде скомпільовано у наступний CSS:
.container {
margin: 10px;
}
Як і в інших CSS препроцесорах, таких як Less, можна звертатися до батьківського селектора, використовуючи символ &:
button
color: white;
&:hover
color: yellow;
Що при компіляції дасть:
button {
color: #fff;
}
button:hover {
color: #ff0;
}
Як використовувати змінні в Stylus CSS
У CSS препроцесорах, таких як Less CSS, змінні позначаються символом @, в той час як у стандартному CSS для цього використовується “–”.
Stylus пропонує інший підхід: для визначення змінної не потрібен спеціальний символ. Замість цього, просто призначте змінну, використовуючи знак рівності (=), щоб надати їй значення:
bg-color = black
Тепер, цю змінну можна використовувати у файлі .styl:
div background-color: bg-color
Наведені блоки коду будуть скомпільовані у наступний CSS:
div {
background-color: #000;
}
Можна визначити пусту змінну, використовуючи круглі дужки, наприклад:
empty-variable = ()
Посилання на інші значення властивостей здійснюється за допомогою символу @. Наприклад, якщо висота елемента div повинна бути половиною його ширини, можна використати наступний код:
element-width = 563px div width: element-width height : (element-width / 2)
Це працює, але можна не створювати окрему змінну, а звернутися до значення властивості width:
div width: 563px height: (@width / 2)
В даному прикладі символ @ дозволяє отримати значення фактичної ширини елемента div. Незалежно від обраного методу, в результаті компіляції .styl файлу має вийти наступний CSS:
div {
width: 563px;
height: 281.5px;
}
Функції в Stylus CSS
В Stylus CSS можна створювати функції, що повертають значення. Наприклад, потрібно встановити властивість вирівнювання тексту div на “center”, якщо його ширина більша за 400 пікселів, або “left”, якщо менша. Для обробки цієї логіки можна створити відповідну функцію.
alignCenter(n)
if (n > 400)
'center'
else if (n < 200)
'left'
div {
width: 563px
text-align: alignCenter(@width)
height: (@width / 2)
}
Цей код викликає функцію alignCenter, передаючи значення властивості width, посилаючись на нього за допомогою символу @. Функція alignCenter перевіряє, чи параметр n більший за 400, і повертає “center”, якщо так. Якщо n менше 200, функція повертає “left”.
Після запуску компілятора, має бути виведений наступний CSS:
div {
width: 563px;
text-align: 'center';
height: 281.5px;
}
У більшості мов програмування, порядок передачі параметрів функції є важливим. Це може призвести до помилок, особливо якщо потрібно передати багато параметрів.
Stylus пропонує рішення: іменовані параметри. Замість послідовної передачі параметрів, можна використовувати їхні імена, наприклад:
subtract(b:30px, a:10px)
Коли використовувати препроцесор CSS
Препроцесори CSS є потужними інструментами для оптимізації робочого процесу. Правильний вибір інструменту для проєкту може підвищити продуктивність. Якщо проєкт потребує лише невеликої кількості CSS, використання препроцесора може бути надмірним.
Якщо ви розробляєте великий проєкт, можливо, у складі команди, який потребує значної кількості CSS, розгляньте можливість використання препроцесора. Вони надають можливості, такі як функції, цикли та міксини, які спрощують роботу над складними проєктами.