SASS функции

Функции используются для вычисления значений и не выводят никакого CSS кода, они только возвращаю значения который могут быть использованы в CSS.

Функции цвета
HSL функции
Числовые функции
Функции списков
Функции массивов
Функции селекторов
Функции самоанализа
Остальные функции

 

Функции цвета

rgb($red, $green, $blue)

Создаёт цвет со значений красного, зелёного и синих цветов.

rgba($red, $green, $blue, $alpha)

Создаёт цвет со значений красного, зелёного и синих цветов и альфа значения.

red($color)

Получить значение красного в цвете.

green($color)

Получить значение зелёного в цвете.

blue($color)

Получить значение синего в цвете.

mix($color1, $color2, [$weight])

Смешать 2 цвета вместе

 

Функции HSL

hsl($hue, $saturation, $lightness)

Создаёт цвет на основе оттенка, насыщенности и яркости.

hsla($hue, $saturation, $lightness, $alpha)

Создаёт цвет на основе оттенка, насыщенности, яркости и альфа значения.

hue($color)

Получает оттенок цвета.

saturation($color)

Получает насыщенность цвета.

lightness($color)

Получает яркость цвета.

adjust-hue($color, $degrees)

Регулировка оттенка цвета.

lighten($color, $amount)

Сделать цвет светлее.

darken($color, $amount)

Сделать цвет темнее.

saturate($color, $amount)

Сделать цвет более насыщенным.

desaturate($color, $amount)

Сделать цвет менее насыщенным.

grayscale($color)

Привести цвет  оттенкам серого.

complement($color)

Дополнительный цвет передаваемого цвета.

invert($color)

Инвертировать цвет.

Функции прозрачности.

alpha($color) / opacity($color)

Получает степень прозрачности (альфа значение)

rgba($color, $alpha)

Установить прозрачность для цвета.

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-hex-str($color)

Перевести цвет в формат который понимают фильтра IE.

Строковые функции

unquote($string)

Удалить кавычки из строки.

quote($string)

Оборачивает статью в кавычки.

str-length($string)

Возвращает длину строки.

str-insert($string, $insert, $index)

Вставляет строку $insert в строку $string на позицию $index

str-index($string, $substring)

Возвращает позицию символа, на котором $substring первый раз встретилась в $string.

str-slice($string, $start-at, [$end-at])

Обрезать строку с позиции $start-at по $end-at.

to-upper-case($string)

Перевести все символы строки в верхний регистр.

to-lower-case($string)

Перевести все символы строки в нижний регистр.

Числовые функции

percentage($number)

Перевести число в проценты.

round($number)

Округлить число к ближайшему целому значению.

ceil($number)

Округлить число в большую степень к ближайшему целому числу.

floor($number)

Округлить число в меньшую степень к ближайшему целому числу.

abs($number)

Возвращает абсолютное значение числа.

min($numbers…)

Найти минимальное из нескольких чисел.

max($numbers…)

Найти максимальное из нескольких чисел.

random([$limit])

Возвращает случайное число.

Функции списков.

length($list)

Возвращает длину списка.

nth($list, $n)

Возвращает $n-ый элемент списка.

set-nth($list, $n, $value)

Заменяет $n-ый элемент списка, на значение $value.

join($list1, $list2, [$separator])

Соединяет 2 списка в 1.

append($list1, $val, [$separator])

Добавить значение в конец списка.

zip($lists…)

Объединяет несколько списков, в один многомерный.

index($list, $value)

Возвращает позицию $value в списке.

list-separator(#list)

Возвращает разделитель списка.

 

Функции массивов

map-get($map, $key)

Возвращает значение массива с ключом $key.

map-merge($map1, $map2)

Объединить 2 массива в 1.

map-remove($map, $keys…)

Возвращает массив без элементов $keys.

map-keys($map)

Возвращает список ключей в массиве.

map-values($map)

Возвращает список значений в массиве.

map-has-key($map, $key)

Возвращает TRUE если $key присутствует в массиве.

keywords($args)

Возвращает список аргументов переданных в функцию или mixin.

Функции селекторов

selector-nest($selectors…)

Выстраивает селекторы один за другим, так как они будут использоваться в таблице стилей.

selector-append($selectors…)

Добавляет селекторы друг к другу без промежутков между ними.

selector-extend($selector, $extendee, $extender)

Расширяет $extendee с  $extender в пределах $selector.

selector-replace($selector, $original, $replacement)

Заменяет $original на $replacement в $selector

selector-unify($selector1, $selector2)

Объединяет 2 селектора для получения селектора который будет соответствовать обоим селекторам.

is-superselector($super, $sub)

Возвращает TRUE если $super входит в множество $sub

simple-selectors($selector)

Возвращает простые селекторы из вложеных.

selector-parse($selector)

Разбирает селекторы в формат возвращаемый &.

Функции самоанализа.

feature-exists($feature)

Возвращает TRUE если элемент существует в текущей сессии SASS.

variable-exists($name)

Возвращает TRUE если переменная существует в текущей области видимости.

global-variable-exists($name)

Возвращает TRUE если переменная существует в глобальной области видимости.

function-exists($name)

Возвращает TRUE если функция с таким именем уже существует.

mixin-exists($name)

Возвращает TRUE если mixin с таким именем уже существует.

inspect($value)

Возвращает строковое представление значения таким, как оно будет представлено в SASS.

type-of($value)

Возвращает тип $value.

unit($number)

Возвращает единицы измерения $number.

unitless($number)

Возвращает TRUE если $number не имеет единиц измерения.

comparable($number1, $number2)

Возвращает TRUE если 2 значения могут быть приведены к одинаковым единицам измерения.

call($name, $args…)

Динамически вызывать функцию SASS.

 Остальные функции.


if($condition, $if-true, $if-false)

Возвращает одно из двух значений, в зависимости от условия $condition

unique-id()

Возвращает уникальный ID селектора.

One thought on “SASS функции”

  1. Миксины похожи на функции и тоже могут работать с переменными. Отличие миксина от функции заключается в том, что функция всегда возвращает значение, а миксин – строки кода.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *