Вивчаємо sass. Функції.

Всім привіт! У цій статті ми розглянемо, як використовувати функції в препроцесорів Sass.

препроцесор Sass дозволяє нам використовувати різні функції, які можуть сильно спростити вам верстку.

Відео: Sass - умови і цикли (@if, @for, @each, @while)

Наприклад, ви можете змінювати рядки:

$ color =# 2196F3- 
 
a { 
 padding:10px- 
 color: $ color- 
} 
 
a:hover { 
 color: darken($ color,10%) - 
}

Як зрозуміло з назви, функція darken затемнює колір. Вона приймає два параметри: власне, сам колір і значення, яке вказує, наскільки його потрібно затемнити.

Є інші функції:

to_upper_case ($ string) - наводить рядок до верхнього регістру
to_lower_case ($ string) - наводить рядок до нижнього регістру
transparentize ($ color, $ amount) - робить колір $ color прозорим на кількість $ amount
type_of ($ value) - повертає тип переданого значення
variable_exists ($ name) - перевіряє, чи існує змінна

Це ой як далеко не повний список функцій, пов`язаних тільки з рядками. Але ж є й інші функції, не менш важливі і цікаві.

Наприклад, є функція round (), яка округлює значення до цілого. є функція random (), що дозволяє отримати випадкове число, і так далі.

Знайти всі функції, а також подивитися приклади їх використання ви можете тут.

В CSS3 Зараз вже з`являються деякі можливості, які раніше були доступні тільки для препроцесорів. Так що, якщо ви не хочете відставати від прогресу, зверніть увагу на відеокурс HTML5 та CSS3 з Нулі до Гуру.

Відео: Sass Tutorials # 11 - Build Your Own Function

А у мене на цьому все. Дякую за увагу!

Поділися в соціальних мережах:

Схожі