SASS функции

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

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

 

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

rgb($red, $green, $blue)

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

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

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

red($color)

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

green($color)

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

blue($color)

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

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

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

$weight - пропорции смешивания

 

Функции 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-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.

to-upper-case($string)

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

to-lower-case($string)

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

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

percentage($number)

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

percentage(0.2) => 20%
percentage(100px / 50px) => 200%

round($number)

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

ceil($number)

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

floor($number)

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

abs($number)

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

min($numbers…)

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

max($numbers…)

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

random([$limit])

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

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

length($list)

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

length(10px) => 1
length(10px 20px 30px) => 3
length((width: 10px, height: 20px)) => 2

nth($list, $n)

Возвращает $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])

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

zip($lists…)

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

index($list, $value)

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

list-separator(#list)

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

list-separator(1px 2px 3px) => space
list-separator(1px, 2px, 3px) => comma
list-separator('foo') => space

 

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

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-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($selectors…)

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

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($selector)

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

simple-selectors(".foo.bar") => ".foo", ".bar"
simple-selectors(".foo.bar.baz") => ".foo", ".bar", ".baz"

selector-parse($selector)

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

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

feature-exists($feature)

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

feature-exists(some-feature-that-exists) => true
feature-exists(what-is-this-i-dont-know) => false

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.

unit(100) => ""
unit(100px) => "px"
unit(3em) => "em"
unit(10px * 5em) => "em*px"
unit(10px * 5em / 30cm / 1rem) => "em*px/cm*rem"

unitless($number)

Возвращает 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

call($name, $args…)

Динамически вызывать функцию 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

unique-id()

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

Один комментарий к “SASS функции”

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

Добавить комментарий для Igrikov Отменить ответ

Ваш адрес email не будет опубликован.