Всем привет! В этом материале рассмотрим, как использовать функции в препроцессоре 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(), позволяющая получить случайное число, и так далее.
Найти все функции, а также посмотреть примеры их использования вы можете здесь.
А у меня на этом все. Спасибо за внимание!
