Коли мова йде про веб-розробку, найпоширенішим способом стилізації програми є використання 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. Написавши CSS-код 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 = 563pxdiv
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 на «centre», якщо ширина більша за 400 пікселів, або «left», якщо ширина менше 400 пікселів. Ви можете створити функцію, яка обробляє цю логіку.
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».
Коли компілятор запускається, він має вивести наступний вихід:
div {
width: 563px;
text-align: 'center';
height: 281.5px;
}
У більшості мов програмування функції призначають параметри на основі порядку, у якому ви їх надаєте. Це може призвести до помилок у результаті передачі параметрів у неправильному порядку, імовірність цього тим більша, чим більше параметрів потрібно передати.
Stylus пропонує рішення: іменовані параметри. Використовуйте їх замість упорядкованих параметрів під час виклику функції, наприклад:
subtract(b:30px, a:10px)
Коли використовувати препроцесор CSS
Препроцесори CSS — це дуже потужні утиліти, які можна використовувати для оптимізації робочого процесу. Вибір правильного інструменту для вашого проекту може допомогти підвищити вашу продуктивність. Якщо вашому проекту потрібна лише невелика кількість CSS, використання препроцесора CSS може бути надмірним.
Якщо ви створюєте великий проект, можливо, як частину команди, який покладається на величезну кількість CSS, подумайте про використання препроцесора. Вони пропонують такі функції, як функції, цикли та міксини, які полегшують оформлення складних проектів.