Напевно багато з вас чули про CSS препроцесор. Писати код, використовуючи його потужні можливості - справді чудово і захоплююче. Та що ж таке той препроцесор? Який препроцесор обрати? Сьогодні ми в цьому розберемося. В цій статті ми розглянемо деякі можливості та переваги використання трьох різних препроцесорів – Sass, LESS, та Stylus.
Вступ
Препроцесор компілює код в CSS, що працює однаково у всіх браузерах.
CSS препроцесор – це програма, яка компілює написаний код(з використанням спец. синтаксису) в чистий CSS код. При цьому, препроцесор надає розробнику нові можливості та функції. Препроцесори мають тисячі особливостей, і в цій статті ми розглянемо деякі найбільш оригінальні властивості препроцесорів.
Давайте почнемо!
Синтаксис
Найважливіше, при використанні CSS препроцесора - це розуміти синтаксис. На щастя, він є однаковий для всіх трьох CSS препроцесорів, які ми розглядаємо.
Sass & LESS
Як Sass, так і LESS використовують стандартний CSS синтаксис. Це робить їх надзвичайно простими для розуміння. Sass використовує розширення .scss, LESS – .less. Простий Sass чи LESS файл виглядає так:
/* style.scss or style.less */
h1 {
color: #0982C1;
}
Ви, напевне, звернули увагу на те, що це є звичайний CSS код, який чудово компілюється, як в Sass, так і в LESS. Важливо зауважити, що Sass також використовує старий синтаксис, при якому опускаються коми та фігурні дужки:
/* style.sass */
h1
color: #0982c1
Stylus
Синтаксис Stylus є більш різноманітним. Використовуючи розширення файлу .styl, Stylus допускає стандартний CSS синтаксис, але також пропонує інші варіанти, де дужки, двокрапки та крапки з комою є необов'язковими. Наприклад:
/* style.styl */
h1 {
color: #0982C1;
}
/* без дужок */
h1
color: #0982C1;
/* без крапок та двокрапок */
h1
color #0982C1
Також можна використовувати декілька варіантів в одному стилі, тобто наступний код буде скомпільований без помилок:
h1 {
color #0982c1
}
h2
font-size: 1.2em
Змінні
Змінні можна оголошувати і використовувати у всій таблиці стилів. Вони можуть приймати будь-яке, використовуване в CSS значення (напр. кольори, цифри чи текст).
Sass
Sass змінні оголошуються з символом $ перед ім'ям, команда присвоювання – двокрапка(:). Наприклад:
$mainColor: #0982c1;
$siteWidth: 1024px;
$borderStyle: dotted;
body {
color: $mainColor;
border: 1px $borderStyle $mainColor;
max-width: $siteWidth;
}
LESS
LESS змінні точно такі ж, як і Sass, але назва змінної починається з символу «@» :
@mainColor: #0982c1;
@siteWidth: 1024px;
@borderStyle: dotted;
body {
color: @mainColor;
border: 1px @borderStyle @mainColor;
max-width: @siteWidth;
}
Stylus
Оголошуються Stylus змінні без всяких символів перед ім'ям, хоча дозволяється використання символу $. Не вимагається наявність крапки з комою в кінці, знак присвоювання – дорівнює (=). Важливо зауважити, що змінні з символом @ Stylus компілює, але вони не є дійсні.Такого краще уникати.
mainColor = #0982c1
siteWidth = 1024px
$borderStyle = dotted
body
color mainColor
border 1px $borderStyle mainColor
max-width siteWidth
Компільований CSS
При компіляції будь-якого, з вище наведених прикладів, ми отримаємо однаковий CSS код. Пофантазуйте, і ви побачите наскільки корисними при написанні CSS бувають змінні. Наприклад, щоб змінити один колір в кількох місцях, вам більше не потрібно буде витрачати багато часу, щоб знайти і переписати його в кожному місці, а оголосивши на початку змінну з кольором, можна буде це зробити всього лише за одне виправлення. Приклад CSS після компіляції:
body {
color: #0982c1;
border: 1px dotted #0982c1;
max-width: 1024px;
}
Вкладеність
При використанні вкладеності в звичайному CSS, доводиться багато разів переписувати ім'я батьківського елемента. Це доволі важко.
section {
margin: 10px;
}
section nav {
height: 25px;
}
section nav a {
color: #0982C1;
}
section nav a:hover {
text-decoration: underline;
}
Препроцесор вирішує цю проблему: ми можемо писати стиль дочірнього елемента всередині дужок батьківського компонента.
Sass, LESS, & Stylus
Всі три препроцесори використовують однаковий синтаксис для вкладених селекторів. Також, за допомогою символу & можна посилатися на батьківський селектор.
section {
margin: 10px;
nav {
height: 25px;
a {
color: #0982C1;
&:hover {
text-decoration: underline;
}
}
}
}
Компільований CSS
Скомпільований CSS код з прикладу вище:
section {
margin: 10px;
}
section nav {
height: 25px;
}
section nav a {
color: #0982C1;
}
section nav a:hover {
text-decoration: underline;
}
Домішки
Домішки це функції, в яких можна окремо виділити певні властивості і повторно використовувати їх кілька разів у всьому CSS файлі. Коли домішка викликається з CSS селектора, препроцесор розпізнає аргумент домішки, і стилі, що розташовані всередині домішки, застосовуються до селектора.
Sass
@mixin error($borderWidth: 2px) {
border: $borderWidth solid #F00;
color: #F00;
}
.generic-error {
padding: 20px;
margin: 4px;
@include error();
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
@include error(5px);
}
LESS
.error(@borderWidth: 2px) {
border: @borderWidth solid #F00;
color: #F00;
}
.generic-error {
padding: 20px;
margin: 4px;
.error();
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
.error(5px);
}
Stylus
error(borderWidth= 2px) {
border: borderWidth solid #F00;
color: #F00;
}
.generic-error {
padding: 20px;
margin: 4px;
error();
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
error(5px);
}
Компільований CSS
Всі три препроцесори скомпілюють вищенаведений код в однаковий CSS файл.
.generic-error {
padding: 20px;
margin: 4px;
border: 2px solid #f00;
color: #f00;
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
border: 5px solid #f00;
color: #f00;
}
Спадкування
При написанні звичного CSS коду, ми могли б використовувати наступний код, щоб застосувати один і той же стиль до кількох елементів відразу:
p,
ul,
ol {
}
Це працює чудово, але якщо окремо потрібно буде додати стиль до деяких елементів, необхідно буде створити ще по одному селектори для кожного. Погодьтеся, це складніше підтримувати і код є доволі незрозумілим. Щоб уникнути цього, можна використовувати наслідування. Спадкування - це здатність одних CSS селекторів наслідувати властивості інших.
Sass & Stylus
.block {
margin: 10px 5px;
padding: 2px;
}
p {
@extend .block; /* Успадкує стиль з '.block' */
border: 1px solid #EEE;
}
ul, ol {
@extend .block; /* Успадкує стиль з '.block' */
color: #333;
text-transform: uppercase;
}
Компільований CSS (Sass & Stylus)
.block, p, ul, ol {
margin: 10px 5px;
padding: 2px;
}
p {
border: 1px solid #EEE;
}
ul, ol {
color: #333;
text-transform: uppercase;
}
LESS
LESS не підтримує спадкування, так як Sass та Stylus. Замість додавання декількох селекторів до одного набору властивостей, він розглядає спадкування, як домішку без аргументів і імпортує стилі в кожен селектор. Недоліком є те, що властивості повторюються в компільованому CSS. Приклад використання:
.block {
margin: 10px 5px;
padding: 2px;
}
p {
.block;
border: 1px solid #EEE;
}
ul, ol {
.block;
color: #333;
text-transform: uppercase;
}
Компільований CSS (LESS)
.block {
margin: 10px 5px;
padding: 2px;
}
p {
margin: 10px 5px;
padding: 2px;
border: 1px solid #EEE;
}
ul,
ol {
margin: 10px 5px;
padding: 2px;
color: #333;
text-transform: uppercase;
}
Як бачимо, стиль з .block був вставлений в селектори, яким ми хотіли надати наслідування.
Імпорт
У CSS спільноті, імпортування є несхвальним, тому що воно вимагає кількох HTTP запитів. Проте, імпорт, використовуючи препроцесори, працює зовсім інакше. Якщо ви імпортуєте файл, використовуючи будь-який з трьох препроцесорів, вони включать імпортований файл в CSS код протягом компіляції, створюючи при цьому лише один CSS файл. Майте на увазі, що імпортування звичайного .css файлу виконується так: @import 'file.css';. Домішки і змінні також можна імпортувати і використовувати в основному коді. Імпортування надає можливість створювати структури файлів.
Sass, LESS, & Stylus
body {
background: #EEE;
}
@import "reset.css";
@import "file.{type}";
p {
background: #0982C1;
}
Компільований CSS
@import "reset.css";
body {
background: #EEE;
}
p {
background: #0982C1;
}
Color функції
Color функції – це вбудовані функції, що дозволяють змінювати колір при компіляції. Може бути корисно для створення градієнтів, інших відтінків кольорів при наведенні курсору.
Sass
lighten($color, 10%);
darken($color, 10%);
saturate($color, 10%);
desaturate($color, 10%);
grayscale($color);
complement($color);
invert($color);
mix($color1, $color2, 50%);
Це лише маленький список наявних color функцій в Sass, повний список доступних Sass color функцій можна знайти в документації
Color функції можна використовувати всюди, де допускається колір в CSS. Наприклад:
$color: #0982C1;
h1 {
background: $color;
border: 3px solid darken($color, 50%);
}
LESS
lighten(@color, 10%);
darken(@color, 10%);
saturate(@color, 10%);
desaturate(@color, 10%);
spin(@color, 10);
spin(@color, -10);
mix(@color1, @color2);
Повний список LESS функцій можна знайти в документації. Приклад, як можна використовувати color функції в LESS:
@color: #0982C1;
h1 {
background: @color;
border: 3px solid darken(@color, 50%);
}
Stylus
lighten(color, 10%);
darken(color, 10%);
saturate(color, 10%);
desaturate(color, 10%);
Повний список Stylus функцій можна знайти в документації. Приклад використання Stylus color функцій:
color = #0982C1
h1
background color
border 3px solid darken(color, 50%)
Операції
Препроцесор надає можливість використання математичних розрахунків в CSS коді.
Sass, LESS, & Stylus
body {
margin: (14px/2);
top: 50px + 100px;
right: 100px - 50px;
left: 10 * 10;
}
Практичне застосування
Ми розглянули багато особливостей і функції препроцесорів, але ми не показали практичних прикладів використання препроцесора. Наприклад:
Vendor Prefixes
Особливо необхідно використовувати препроцесор при створенні Vendor Prefixes – це економить багато часу і зусиль. Приклад реалізації:
Sass
@mixin border-radius($values) {
-webkit-border-radius: $values;
-moz-border-radius: $values;
border-radius: $values;
}
div {
@include border-radius(10px);
}
```
_LESS_
.border-radius(@values) { -webkit-border-radius: @values; -moz-border-radius: @values; border-radius: @values; }
div { .border-radius(10px); }
_Stylus_
border-radius(values) { -webkit-border-radius: values; -moz-border-radius: values; border-radius: values; }
div { border-radius(10px); }
_Компільований CSS_
div { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
**3D текст**
Створення 3D тексту, використовуючи кілька ```text-shadows``` – хороша ідея, але є одна проблема. Вона полягає в тому, що після створення тексту, його важко редагувати. Використовуючи домішки та color функції, можна з легкістю створити 3D текст і при бажанні змінити колір!
_Sass_
@mixin text3d($color) { color: $color; text-shadow: 1px 1px 0px darken($color, 5%), 2px 2px 0px darken($color, 10%), 3px 3px 0px darken($color, 15%), 4px 4px 0px darken($color, 20%), 4px 4px 2px #000; }
h1 { font-size: 32pt; @include text3d(#0982c1); }
_Less_
.text3d(@color) { color: @color; text-shadow: 1px 1px 0px darken(@color, 5%), 2px 2px 0px darken(@color, 10%), 3px 3px 0px darken(@color, 15%), 4px 4px 0px darken(@color, 20%), 4px 4px 2px #000; }
span { font-size: 32pt; .text3d(#0982c1); }
_Stylus_
text3d(color) color: color text-shadow: 1px 1px 0px darken(color, 5%), 2px 2px 0px darken(color, 10%), 3px 3px 0px darken(color, 15%), 4px 4px 0px darken(color, 20%), 4px 4px 2px #000 span font-size: 32pt text3d(#0982c1)
_Компільований CSS_
span { font-size: 32pt; color: #0982c1; text-shadow: 1px 1px 0px #097bb7, 2px 2px 0px #0875ae, 3px 3px 0px #086fa4, 4px 4px 0px #07689a, 4px 4px 2px #000; }
_Результат_
**Колонки **
При розмітці сайту дуже зручно викоистовувати змінні та математичні обрахунки. Оголосивши в одній змінні ширину сайту, ми можемо проводити з нею подальші необхідні обрахунки, без самостійного додавання чи віднімання. До того ж, якщо прийдеться змінювати ширину сайту, то потрібно буде змінити її лише в одному місці. Ось як це робиться:
_Sass_
$siteWidth: 1024px; $gutterWidth: 20px; $sidebarWidth: 300px;
body { margin: 0 auto; width: $siteWidth; } .content { float: left; width: $siteWidth - ($sidebarWidth+$gutterWidth); } .sidebar { float: left; margin-left: $gutterWidth; width: $sidebarWidth; }
_LESS_
@siteWidth: 1024px; @gutterWidth: 20px; @sidebarWidth: 300px;
body { margin: 0 auto; width: @siteWidth; } .content { float: left; width: @siteWidth - (@sidebarWidth+@gutterWidth); } .sidebar { float: left; margin-left: @gutterWidth; width: @sidebarWidth; }
_Stylus_
siteWidth = 1024px; gutterWidth = 20px; sidebarWidth = 300px;
body { margin: 0 auto; width: siteWidth; } .content { float: left; width: siteWidth - (sidebarWidth+gutterWidth); } .sidebar { float: left; margin-left: gutterWidth; width: sidebarWidth; }
_Компільований CSS_
body { margin: 0 auto; width: 1024px; } .content { float: left; width: 704px; } .sidebar { float: left; margin-left: 20px; width: 300px; }
### **Відомі особливості**
CSS препроцесор має деякі свої особливості використання. Ось деякі найбільш поширені:
_Повідомлення про помилки _
Якщо ви писали CSS протягом великого періоду часу, то, я впевнений, у вас були ситуації, коли ви розуміли, що десь є помилки, та не могли знайти їх.
CSS препроцесори повідомляють про помилки. Якщо з вашим кодом щось не так, препроцесор повідомить вам де, і можливо, чому виникає помилка в коді.
_Коментарі_
При компіляції CSS, будь-який коментар, оголошений подвійним слешем, буде видалений(напр. ```//comment```), а кожен коментар «слеш-зірочка» (напр. ```/* comment */```) залишається. Тож, використовуйте подвійний слеш для коментарів, які необхідні при роботі з кодом до компіляції, а слеш з зірочкою для коментарів, які хочете бачити в коді CSS.
### **Підсумок**
Кожен CSS препроцесор, що ми розглянули (Sass, LESS і Stylus), має свій унікальний спосіб досягнення однієї і тієї ж мети – використання корисних, непідтримуваних функцій CSS, зберігаючи сумісність браузера і чистоту коду.
Якщо ви ще досі не спробували препроцесор для написання CSS, я рекомендую вам зробити це. Закликаю кожного спробувати якомога більше препроцесорів, щоб вибрати найбільш ефективний для себе.
Ще немає коментарів