Функции используются для вычисления значений и не выводят никакого CSS кода, они только возвращаю значения который могут быть использованы в CSS.
Функции цвета
HSL функции
Числовые функции
Функции списков
Функции массивов
Функции селекторов
Функции самоанализа
Остальные функции
Функции цвета
Создаёт цвет со значений красного, зелёного и синих цветов.
rgba($red, $green, $blue, $alpha)
Создаёт цвет со значений красного, зелёного и синих цветов и альфа значения.
Получить значение красного в цвете.
Получить значение зелёного в цвете.
Получить значение синего в цвете.
mix($color1, $color2, [$weight])
Смешать 2 цвета вместе
1 |
$weight - пропорции смешивания |
Функции HSL
hsl($hue, $saturation, $lightness)
Создаёт цвет на основе оттенка, насыщенности и яркости.
hsla($hue, $saturation, $lightness, $alpha)
Создаёт цвет на основе оттенка, насыщенности, яркости и альфа значения.
Получает оттенок цвета.
Получает насыщенность цвета.
Получает яркость цвета.
Регулировка оттенка цвета.
Сделать цвет светлее.
Сделать цвет темнее.
Сделать цвет более насыщенным.
Сделать цвет менее насыщенным.
Привести цвет оттенкам серого.
Дополнительный цвет передаваемого цвета.
Инвертировать цвет.
Функции прозрачности.
alpha($color) / opacity($color)
Получает степень прозрачности (альфа значение)
Установить прозрачность для цвета.
opacify($color, $amount) / fade-in($color, $amount)
transparentize($color, $amount) / fade-out($color, $amount)
Остальные функции с цветом
adjust-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])
Увеличение или уменьшение одного или нескольких параметров цвета.
scale-color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha])
Плавно изменяет одно из значений цвета.
change-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])
Изменить один или несколько параметров цвета.
Перевести цвет в формат который понимают фильтра IE.
Строковые функции
Удалить кавычки из строки.
Оборачивает статью в кавычки.
Возвращает длину строки.
str-insert($string, $insert, $index)
Вставляет строку $insert в строку $string на позицию $index
str-index($string, $substring)
Возвращает позицию символа, на котором $substring первый раз встретилась в $string.
1 2 3 4 |
str-index(abcd, a) => 1 str-index(abcd, ab) => 1 str-index(abcd, X) => null str-index(abcd, c) => 3 |
str-slice($string, $start-at, [$end-at])
Обрезать строку с позиции $start-at по $end-at.
Перевести все символы строки в верхний регистр.
Перевести все символы строки в нижний регистр.
Числовые функции
Перевести число в проценты.
1 2 3 |
percentage(0.2) => 20% percentage(100px / 50px) => 200% </code> |
Округлить число к ближайшему целому значению.
Округлить число в большую степень к ближайшему целому числу.
Округлить число в меньшую степень к ближайшему целому числу.
Возвращает абсолютное значение числа.
Найти минимальное из нескольких чисел.
Найти максимальное из нескольких чисел.
Функции списков.
Возвращает длину списка.
1 2 3 |
length(10px) => 1 length(10px 20px 30px) => 3 length((width: 10px, height: 20px)) => 2 |
Возвращает $n-ый элемент списка.
1 2 3 |
nth(10px 20px 30px, 1) => 10px nth((Helvetica, Arial, sans-serif), 3) => sans-serif nth((width: 10px, length: 20px), 2) => length, 20px |
set-nth($list, $n, $value)
Заменяет $n-ый элемент списка, на значение $value.
join($list1, $list2, [$separator])
Соединяет 2 списка в 1.
append($list1, $val, [$separator])
Добавить значение в конец списка.
Объединяет несколько списков, в один многомерный.
Возвращает позицию $value в списке.
Возвращает разделитель списка.
1 2 3 |
list-separator(1px 2px 3px) => space list-separator(1px, 2px, 3px) => comma list-separator('foo') => space |
Функции массивов
Возвращает значение массива с ключом $key.
Объединить 2 массива в 1.
Возвращает массив без элементов $keys.
Возвращает список ключей в массиве.
Возвращает список значений в массиве.
Возвращает TRUE если $key присутствует в массиве.
Возвращает список аргументов переданных в функцию или mixin.
Функции селекторов
Выстраивает селекторы один за другим, так как они будут использоваться в таблице стилей.
1 2 3 |
selector-nest(".foo", ".bar", ".baz") => .foo .bar .baz selector-nest(".a .foo", ".b .bar") => .a .foo .b .bar selector-nest(".foo", "&.bar") => .foo.bar |
Добавляет селекторы друг к другу без промежутков между ними.
1 2 3 |
selector-append(".foo", ".bar", ".baz") => .foo.bar.baz selector-append(".a .foo", ".b .bar") => "a .foo.b .bar" selector-append(".foo", "-suffix") => ".foo-suffix" |
selector-extend($selector, $extendee, $extender)
Расширяет $extendee с $extender в пределах
$selector
.
1 |
selector-extend(".a .b", ".b", ".foo .bar") => .a .b, .a .foo .bar, .foo .a .bar |
selector-replace($selector, $original, $replacement)
Заменяет $original на $replacement в $selector
1 2 |
selector-replace(".foo .bar", ".bar", ".baz") => ".foo .baz" selector-replace(".foo.bar.baz", ".foo.baz", ".qux") => ".bar.qux" |
selector-unify($selector1, $selector2)
Объединяет 2 селектора для получения селектора который будет соответствовать обоим селекторам.
1 2 3 4 |
selector-unify(".a", ".b") => .a.b selector-unify(".a .b", ".x .y") => .a .x .b.y, .x .a .b.y selector-unify(".a.b", ".b.c") => .a.b.c selector-unify("#a", "#b") => null |
is-superselector($super, $sub)
Возвращает TRUE если $super входит в множество $sub
1 2 3 4 |
is-superselector(".foo", ".foo.bar") => true is-superselector(".foo.bar", ".foo") => false is-superselector(".bar", ".foo .bar") => true is-superselector(".foo .bar", ".bar") => false |
Возвращает простые селекторы из вложеных.
1 2 |
simple-selectors(".foo.bar") => ".foo", ".bar" simple-selectors(".foo.bar.baz") => ".foo", ".bar", ".baz" |
Разбирает селекторы в формат возвращаемый &.
Функции самоанализа.
Возвращает TRUE если элемент существует в текущей сессии SASS.
1 2 |
feature-exists(some-feature-that-exists) => true feature-exists(what-is-this-i-dont-know) => false |
Возвращает TRUE если переменная существует в текущей области видимости.
Возвращает TRUE если переменная существует в глобальной области видимости.
Возвращает TRUE если функция с таким именем уже существует.
Возвращает TRUE если mixin с таким именем уже существует.
Возвращает строковое представление значения таким, как оно будет представлено в SASS.
Возвращает тип $value.
Возвращает единицы измерения $number.
1 2 3 4 5 |
unit(100) => "" unit(100px) => "px" unit(3em) => "em" unit(10px * 5em) => "em*px" unit(10px * 5em / 30cm / 1rem) => "em*px/cm*rem" |
Возвращает TRUE если $number не имеет единиц измерения.
1 2 |
unitless(100) => true unitless(100px) => false |
comparable($number1, $number2)
Возвращает TRUE если 2 значения могут быть приведены к одинаковым единицам измерения.
1 2 3 |
comparable(2px, 1px) => true comparable(100px, 3em) => false comparable(10cm, 3mm) => true |
Динамически вызывать функцию SASS.
1 2 3 4 5 |
call(rgb, 10, 100, 255) => #0a64ff call(scale-color, #0a64ff, $lightness: -10%) => #0058ef $fn: nth; call($fn, (a b c), 2) => b |
Остальные функции.
if($condition, $if-true, $if-false)
Возвращает одно из двух значений, в зависимости от условия $condition
1 2 |
if(true, 1px, 2px) => 1px if(false, 1px, 2px) => 2px |
Возвращает уникальный ID селектора.
Миксины похожи на функции и тоже могут работать с переменными. Отличие миксина от функции заключается в том, что функция всегда возвращает значение, а миксин – строки кода.