Якщо ви пишете велику кількість коду на CSS, препроцесори можуть заощадити вам багато нервів і часу. Використовуючи Sass, Less, Stylus або PostCSS (пост-процесор) робити великі і складні таблиці стилів стане значно простіше та зрозуміліше. Дякуючи таким нововведенням як: змінні, функції, mixin (міксини) код стає більш організованим, дозволяючи розробнику працювати швидше і робити менше помилок. Сьогодні я збираюсь вам показати деякі основні риси препроцесору Sass.
1.Початок роботи з Sass
На жаль Sass файли не можуть бути інтерпретовані браузером, тому вони потребують компіляції з CSS перш ніж вони будуть готові відображатися в браузері. Тому для початку вам потрібен інструмент, який допоможе перевести .scss(або .sass) файл в .css.
-
Найпростішим способом вирішення цієї проблеми є - інструмент для написання та компіляції Sass прямо в браузері - SassMeister
-
Ще одним із способів є інсталювання додатку для Sass. Тут ви можете знайти декілька з них, на сайті присутні як і платні версії так і безкоштовні.
-
Якщо ви добре володієте CL (Command Line) то ви можете встановити Sass на ваш комп'ютер і компілювати файли вручну.
Якщо ви вирішите використовувати CL, ви можете встановити Sass в його первісному вигляді( написаний на Ruby) або ви можете спробувати порт Node.js.
Ось так ви можете скомпілювати .scss (.sass) файли за допомогою CL:
node-sass input.scss output.css.
Крім того, саме час сказати про те, що Sass пропонує два різних синтаксиси - Sass і SCSS. Вони виконують однакові функції, просто виглядають по-різному. SCSS новіший і, як правило, вважається кращим, тому ми будемо використовувати його.
2. Змінні
Змінні в Sass працюють таким же чином, як і в будь-якій іншій мові програмування, мають ті ж самі принципи: типи даних і області застосування. Коли ми ініціалізуємо змінну, ми зберігаємо всередині неї певне значення, яке зазвичай часто повторюється в CSS, наприклад кольори палітри, розмір шрифту та інші значення.
Нижче ви можете побачити простий приклад.
SCSS
$title-font: normal 24px/1.5 'Open Sans', sans-serif;
$cool-red: #F44336;
$box-shadow-bottom-only: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
h1.title {
font: $title-font;
color: $cool-red;
}
div.container {
color: $cool-red;
background: #fff;
width: 100%;
box-shadow: $box-shadow-bottom-only;
}
CSS
h1.title {
font: normal 24px/1.5 "Open Sans", sans-serif;
color: #F44336;
}
div.container {
color: #F44336;
background: #fff;
width: 100%;
box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
}
Ідея всього цього в тому, що ми можемо в подальшому повторно використовувати одні і ті ж значення більш швидко, або якщо потрібно щось змінити, ми можемо це зробити в одному місці (визначення змінної), замість того щоб змінювати всюди це вручну, ми можемо використовувати цю властивість.
3. Mixins
Вважайте, що міксини (домішки) це спрощений варіант класів в мовах програмування - ви можете захопити цілу групу CSS налаштувань і повторно використовувати на будь-який елемент, котрому ви забажаєте такий самий набір стилів.
Домішки можуть приймати аргументи з можливістю установки значень за умовчуванням. У наведеному нижче прикладі ми оголошуємо міксин для квадрату і створюємо декілька різних за розміром і кольором елементів.
SCSS
@mixin square($size, $color) {
width: $size;
height: $size;
background-color: $color;
}
.small-blue-square {
@include square(20px, rgb(0,0,255));
}
.big-red-square {
@include square(300px, rgb(255,0,0));
}
CSS
.small-blue-square {
width: 20px;
height: 20px;
background-color: blue;
}
.big-red-square {
width: 300px;
height: 300px;
background-color: red;
}
Інший ефективний спосіб використовувати міксин коли властивість вимагає префіксів для роботи у всіх браузерах.
SCSS
@mixin transform-tilt() {
$tilt: rotate(15deg);
-webkit-transform: $tilt; /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */
-ms-transform: $tilt; /* IE 9 */
transform: $tilt; /* IE 10, Fx 16+, Op 12.1+ */
}
.frame:hover {
@include transform-tilt;
}
CSS
.frame:hover {
-webkit-transform: rotate(15deg); /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */
-ms-transform: rotate(15deg); /* IE 9 */
transform: rotate(15deg); /* IE 10, Fx 16+, Op 12.1+ */
}
4. Наслідування
Наступна особливість, яку ми розглянемо це @extend: вона дозволяє успадкувати властивості CSS одного селектора до іншого. Вона працює аналогічно міксинам, але наслідування краще в тому випадку, коли ми хочемо створити логічний зв'язок між елементами на сторінці.
Наслідування слід використовувати коли нам потрібно аналогічним чином оформити елементи, які відрізняються в деяких деталях. Наприклад, давайте створимо дві діалогові кнопки - одна для підтвердження, а інша для скасування діалогу.
SCSS
.dialog-button {
box-sizing: border-box;
color: #ffffff;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
padding: 12px 40px;
cursor: pointer;
}
.confirm {
@extend .dialog-button;
background-color: #87bae1;
float: left;
}
.cancel {
@extend .dialog-button;
background-color: #e4749e;
float: right;
}
CSS
.dialog-button, .confirm, .cancel {
box-sizing: border-box;
color: #ffffff;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
padding: 12px 40px;
cursor: pointer;
}
.confirm {
background-color: #87bae1;
float: left;
}
.cancel {
background-color: #e4749e;
float: right;
}
5. Вкладеність
В HTML слід дотримуватися сурової вкладеності структури, тоді як в CSS зазвичай повний хаос. Тож не дарма ми встановлювали препроцесор. Sass допоможе організувати таблицю стилів таким чином, щоб вона була якнайбільше подібна до вашої HTML розмітки, тим самим знижуючи ймовірність конфліктів CSS.
Для прикладу давайте стилізуємо список, що містить ряд посилань.
SCSS
ul {
list-style: none;
li {
padding: 15px;
display: inline-block;
a {
text-decoration: none;
font-size: 16px;
color: #444;
}
}
}
CSS
ul {
list-style: none;
}
ul li {
padding: 15px;
display: inline-block;
}
ul li a {
text-decoration: none;
font-size: 16px;
color: #444;
}
6. Операції
Ssas дає можливість робити базові математичні операції прямо в таблиці стилів, достатньо просто застосувати відповідний арифметичний символ.
SCSS
$width: 800px;
.container {
width: $width;
}
.column-half {
width: $width / 2;
}
.column-fifth {
width: $width / 5;
}
CSS
.container {
width: 800px;
}
.column-half {
width: 400px;
}
.column-fifth {
width: 160px;
}
Хоча і звичайний CSS тепер також пропонує цю функцію у вигляді calc(), але все ж таки Sass швидший для написання, має операцію по модулю (%) і може бути застосований до більш широкого діапазону типів даних (наприклад, кольору і рядків).
7. Функції
Sass пропонує великий список вбудованих функцій. Вони служать для різних потреб, включаючи обробку рядків, операції пов'язані з кольором, а для математичних задач можуть знадобитися такі функції, як random(), round().
Для того щоб продемонструвати одну з простіших функцій Sass, ми створимо швидкий фрагмент коду, який використовує ефект затемнення.
SCSS
$awesome-blue: #2196F3;
a {
padding: 10px 15px;
background-color: $awesome-blue;
}
a:hover {
background-color: darken($awesome-blue,10%);
}
CSS
a {
padding: 10px 15px;
background-color: #2196F3;
}
a:hover {
background-color: #0c7cd5;
}
Окрім великого список доступних функцій ви можете створити свою функцію. Sass має широкі можливості і тому ви можете створювати досить складні функції.
Висновок
Деякі з вище перелічених функцій в Sass, перейдуть до стандартного CSS. Але це не заважає нам користуватися ним, тому що препроцесори є відмінним способом поліпшити написання CSS коду, а Sass є чудовим прикладом.
Ще немає коментарів