Изучаем Sass. Функции.
Всем привет! В этой статье мы рассмотрим, как использовать функции в препроцессоре Sass.
Препроцессор Sass позволяет нам использовать различные функции, которые могут сильно упростить вам верстку.
Например, вы можете изменять строки:
$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 с Нуля до Гуру.
А у меня на этом все. Спасибо за внимание!
-
Создано 18.04.2016 19:18:14
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.