Нещодавно на Codeguida вийшов переклад статті про SASS, і я вирішив написати про свій улюблений препроцесор, адже він такий зручний і чомусь такий непопулярний.
CSS потрібен герой
Перш за все з'ясуємо, що таке Stylus. Stylus це один з трійки найвідоміших препросесорів CSS (ще є LESS та SASS). І за історичними обставинами найменш популярний, але потужніший за LESS та може потужніший (або хоча б на рівні) SASS. В цій статті ми ознайомимось з синтаксисом та деякими цікавими фічами, що дуже корисні в роботі.
Початок роботи
Так як Stylus не працює в браузері, нам потрібно спочатку компілювати його в CSS. Робити це можна декількома шляхами:
- Онлайн — найлегше
- Модулі для Grunt Gulp — найзручніше
- JavaScript API
Я в своїй роботі використовую Gulp, але для експериментів та навчання досить і онлайн-інструменту.
Синтаксис
Давайте поглянемо на наступний СSS
body {
color: #666;
font: 12px sans-serif;
}
Досить просто, чи не так? Але тут багато зайвого, і особливо це помітно на великих проектах. Давайте трохи спростимо цей код, прибравши зайве.
body
color #666
font 12px sans-serif
Незвично, правда? Ось це і є базовим синтаксисом Stylus: тепер вам не потрібні фігурні дужки, двокрапки та крапка з комою. Але тим не менш, Stylus дозволяє додавати ці знаки, вони не грають ніякої ролі. Єдине, що слід зауважити, вкладеність реалізується відступами (я використовую 4 пробіли). Тобто, ось ці варіанти будуть працювати.
body
color #666;
font 12px sans-serif;
body {
color #666
font 12px sans-serif
}
// І навіть так
body
color: #666
font 12px sans-serif;
Тепер ви можете писати на скороченому CSS, але це ж не те, що ви очікували? Насправді Stylus має набагато більше можливостей. Наприклад, тут є нормальні однострічкові коментарі:
// Це однострічковий коментар
/*
А тут може бути скільки завгодно
тексту на різних стрічках
*/
Селектори
Селектори дуже схожі на ті, що в CSS, і навіть повністю сумісні з ними. Але Stylus привносить деякі покращення до них. Наприклад, вкладені стилі можна писати так:
.btn
text-align center
.icon
float right
Результат
.btn {
text-align: center;
}
.btn .icon {
float: right;
}
Змінні
Також Stylus дозволяє використовувати змінні. Це коли ви зберігаєте якісь дані (будь-які) щоб використати їх далі в коді, і навіть декілька раз. Якщо ви переходите з SASS, то вам повинна сподобатися можливість використовувати $ в імені змінної.
codeguida = "cool site"
btn_padding = 12px
menu_pos = fixed
Потім їх можна використовувати в коді замість значення, яке вона зберігає.
a:after
content codeguida
.btn
padding btn_padding
.menu
position menu_pos
Як бачите, змінні можуть зберігати майже будь-яке значення (окрім властивостей. Хоча, його теж, але це робиться інтерполяцією і взагалі зовсім інша історія).
Домішки / Міксини / Mixins
Міксини це такі частини коду, що можуть бути використані повторно. Щось схоже на функції в мовах програмування, вони також можуть приймати аргументи:
red_btn(border_size)
color white
background red
border border_size solid black
delete
red_btn(3px)
Результат:
delete {
color: #fff;
background: #f00;
border: 3px solid #000;
}
Дуже зручно для створення прототипів для елементів. Також їх можна використовувати для встановлення префіксів відразу для всіх браузерів (але краще використовувати Autoprefixer для цього).
Наслідування
Якщо ви користувалися SASS, то знаєте про таку фічу як @extend. В мене гарні новини: в Stylus він теж є. А для тих, хто не знає, поясню: @extend дозволяє організовувати наслідування і копіювати властивості від одного елемента до іншого.
.base-btn
padding 10px 20px
background-color black
color white
.danger-btn
@extend .base-btn
background-color red
Результат:
.base-btn,
.danger-btn {
padding: 10px 20px;
background-color: #000;
color: #fff;
}
.danger-btn {
background-color: #f00;
}
Оператори
Stylus підтримує всі необхідні оператори: арифметичні (+, -, *, / та інші), умовні (if, else) та логічні (!, ==, !=, and, or та інші).
main-width = 800px
.half
width (main-width / 2)
.quarter
width (main-width / 4)
Зауважте, що ділення завжди краще брати в дужки. Без них воно іноді просто не виконується, це робиться для підтримки властивості line-height, в якій цей знак грає роль.
.half {
width: 400px;
}
.quarter {
width: 200px;
}
А ось так можна реалізувати базову логіку:
hello(key)
if key == 42
color yellow
else
color black
a
hello(42)
Стає
a {
color: #ff0;
}
Функції
В Stylus є багато вбудованих функцій, але він також дозволяє писати власні. Давайте спочатку розглянемо вбудовані. Ми розглянемо не всі, а лише частину, насправді їх набагато більше. Почнемо з lighten та darken: ці функції приймають аргументом колір та значення наскільки його потрібно освітлити чи затемнити (зауважте, одиниця вимірювання важлива):
darken(#D62828, 30)
// => #551010
darken(#D62828, 30%)
// => #961c1c
lighten(#2c2c2c, 30)
// => #787878
lighten(#2c2c2c, 30%)
// => #393939
Функції для округлення чисел: ceil, floor, round:
ceil(5.5in)
// => 6in
floor(5.6px)
// => 5px
round(5.5px)
// => 6px
round(5.4px)
// => 5px
Всі вони приймають другий аргумент, що вказує до скількох цифр після крапки слід округляти.
ceil(5.52px,1)
// => 5.6px
floor(5.57px,1)
// => 5.5px
round(5.52px,1)
// => 5.5px
Тепер давайте розглянемо як оголосити власну функцію. Оголошуються вони так само як і домішки, з тією відмінністю, що можуть повертати значення. Автоматично з функції повертається останнє вирахуване значення, а за допомогою оператору return можна повернути будь яке значення.
get-42()
42px
get-42-2(a, b, c)
a*b*c
return 42px
.first
font-size get-42()
.second
font-size get-42-2(1, 2, 3)
Перетвориться в
.first {
font-size: 42px;
}
.second {
font-size: 42px;
}
І це все?
Звісно ні, в Stylus є ще купа можливостей. Цикли, інтерполяція, хеші (key-value), списки (масиви), параметри за умовчуванням, змінна кількість параметрів, параметри за іменами, ітерація, модулі — все це Stylus підтримує. Якщо щось з цього вас зацікавило — рекомендую ознайомитися з офіційною документацією, вона дуже детальна та зрозуміла.
Ще немає коментарів