SASS функции
Функции используются для вычисления значений и не выводят никакого CSS кода, они только возвращаю значения который могут быть использованы в CSS.
Функции цвета
HSL функции
Числовые функции
Функции списков
Функции массивов
Функции селекторов
Функции самоанализа
Остальные функции
Функции цвета
Создаёт цвет со значений красного, зелёного и синих цветов.
rgba($red, $green, $blue, $alpha)
Создаёт цвет со значений красного, зелёного и синих цветов и альфа значения.
Получить значение красного в цвете.
Получить значение зелёного в цвете.
Получить значение синего в цвете.
mix($color1, $color2, [$weight])
Смешать 2 цвета вместе
$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.
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.
Перевести все символы строки в верхний регистр.
Перевести все символы строки в нижний регистр.
Числовые функции
Перевести число в проценты.
percentage(0.2) => 20%
percentage(100px / 50px) => 200%
Округлить число к ближайшему целому значению.
Округлить число в большую степень к ближайшему целому числу.
Округлить число в меньшую степень к ближайшему целому числу.
Возвращает абсолютное значение числа.
Найти минимальное из нескольких чисел.
Найти максимальное из нескольких чисел.
Функции списков.
Возвращает длину списка.
length(10px) => 1
length(10px 20px 30px) => 3
length((width: 10px, height: 20px)) => 2
Возвращает $n-ый элемент списка.
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 в списке.
Возвращает разделитель списка.
list-separator(1px 2px 3px) => space
list-separator(1px, 2px, 3px) => comma
list-separator('foo') => space
Функции массивов
Возвращает значение массива с ключом $key.
Объединить 2 массива в 1.
Возвращает массив без элементов $keys.
Возвращает список ключей в массиве.
Возвращает список значений в массиве.
Возвращает TRUE если $key присутствует в массиве.
Возвращает список аргументов переданных в функцию или mixin.
Функции селекторов
Выстраивает селекторы один за другим, так как они будут использоваться в таблице стилей.
selector-nest(".foo", ".bar", ".baz") => .foo .bar .baz
selector-nest(".a .foo", ".b .bar") => .a .foo .b .bar
selector-nest(".foo", "&.bar") => .foo.bar
Добавляет селекторы друг к другу без промежутков между ними.
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
.
selector-extend(".a .b", ".b", ".foo .bar") => .a .b, .a .foo .bar, .foo .a .bar
selector-replace($selector, $original, $replacement)
Заменяет $original на $replacement в $selector
selector-replace(".foo .bar", ".bar", ".baz") => ".foo .baz"
selector-replace(".foo.bar.baz", ".foo.baz", ".qux") => ".bar.qux"
selector-unify($selector1, $selector2)
Объединяет 2 селектора для получения селектора который будет соответствовать обоим селекторам.
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
is-superselector(".foo", ".foo.bar") => true
is-superselector(".foo.bar", ".foo") => false
is-superselector(".bar", ".foo .bar") => true
is-superselector(".foo .bar", ".bar") => false
Возвращает простые селекторы из вложеных.
simple-selectors(".foo.bar") => ".foo", ".bar"
simple-selectors(".foo.bar.baz") => ".foo", ".bar", ".baz"
Разбирает селекторы в формат возвращаемый &.
Функции самоанализа.
Возвращает TRUE если элемент существует в текущей сессии SASS.
feature-exists(some-feature-that-exists) => true
feature-exists(what-is-this-i-dont-know) => false
Возвращает TRUE если переменная существует в текущей области видимости.
Возвращает TRUE если переменная существует в глобальной области видимости.
Возвращает TRUE если функция с таким именем уже существует.
Возвращает TRUE если mixin с таким именем уже существует.
Возвращает строковое представление значения таким, как оно будет представлено в SASS.
Возвращает тип $value.
Возвращает единицы измерения $number.
unit(100) => ""
unit(100px) => "px"
unit(3em) => "em"
unit(10px * 5em) => "em*px"
unit(10px * 5em / 30cm / 1rem) => "em*px/cm*rem"
Возвращает TRUE если $number не имеет единиц измерения.
unitless(100) => true
unitless(100px) => false
comparable($number1, $number2)
Возвращает TRUE если 2 значения могут быть приведены к одинаковым единицам измерения.
comparable(2px, 1px) => true
comparable(100px, 3em) => false
comparable(10cm, 3mm) => true
Динамически вызывать функцию SASS.
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
if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px
Возвращает уникальный ID селектора.
Миксины похожи на функции и тоже могут работать с переменными. Отличие миксина от функции заключается в том, что функция всегда возвращает значение, а миксин – строки кода.