sass:color
- Dart Sass
- since 1.23.0
- LibSass
- ✗
- Ruby Sass
- ✗
color.adjust($color,
$red: null, $green: null, $blue: null,
$hue: null, $saturation: null, $lightness: null,
$whiteness: null, $blackness: null,
$alpha: null)
adjust-color(...) //=> color - Dart Sass
- since 1.27.0
- LibSass
- ✗
- Ruby Sass
- ✗
Увеличивает или уменьшает одно или несколько свойств $color на фиксированную величину.
Добавляет значение, переданное для каждого аргумента ключевого слова, к соответствующему свойству цвета и возвращает скорректированный цвет. Ошибка при указании свойства RGB ($red, $green, и/или $blue) одновременно со свойством HSL ($hue, $saturation, и/или $lightness), или любой из них одновременно со свойством HWB ($hue, $whiteness, и/или $blackness).
Все необязательные аргументы должны быть числами. Аргументы $red, $green и $blue должны иметь значение без единиц измерения и находиться в диапазоне от -255 до 255 (включительно). Аргумент $hue должен иметь либо единицу deg, либо не иметь единицы. Аргументы $saturation, $lightness, $whiteness и $blackness должны находиться в диапазоне от -100% до 100% (включительно) и не могут быть безразмерными. Аргумент $alpha должен быть безразмерным и находиться в диапазоне от -1 до 1 (включительно).
Смотрите также:
color.scale()для плавного масштабирования свойств цвета.color.change()для установки свойств цвета.
adjust-hue($color, $degrees) //=> color Увеличивает или уменьшает оттенок $color.
$hue должен быть числом от -360deg до 360deg (включительно), чтобы добавить к оттенку $color. Он может быть безразмерным, но не может иметь никаких других единиц, кроме deg.
Смотрите также color.adjust(), где можно настроить любое свойство цвета.
⚠️ Внимание!
Поскольку adjust-hue() дублируется с adjust(), он не включен непосредственно в новую модульную систему. Вместо adjust-hue($color, $amount), вы можете написать color.adjust($color, $hue: $amount).
color.alpha($color)
alpha($color)
opacity($color) //=> number Возвращает альфа-канал $color в виде числа от 0 до 1.
Как особый случай, он поддерживает синтаксис Internet Explorer alpha(opacity=20), для которого он возвращает строку без кавычек.
Смотрите также:
color.red()для получения красного канала цвета.color.green()для получения зеленого канала цвета.color.blue()для получения канала синего цвета.color.hue()для получения оттенка цвета.color.saturation()для получения насыщенности цвета.color.lightness()для получения яркости цвета.
color.blackness($color) //=> number - Dart Sass
- since 1.27.0
- LibSass
- ✗
- Ruby Sass
- ✗
Возвращает HWB уровень черного для $color как число от 0% до 100%.
Смотрите также:
color.red()для получения красного канала цвета.color.green()для получения зеленого канала цвета.color.hue()для получения оттенка цвета.color.saturation()для получения насыщенности цвета.color.lightness()для получения яркости цвета.color.whiteness()для получения белизны цвета.color.alpha()для получения альфа-канала цвета.
color.blue($color)
blue($color) //=> number Возвращает синий канал $color как число от 0 до 255.
Смотрите также:
color.red()для получения красного канала цвета.color.green()для получения зеленого канала цвета.color.hue()для получения оттенка цвета.color.saturation()для получения насыщенности цвета.color.lightness()для получения яркости цвета.color.whiteness()для получения белизны цвета.color.blackness()для получения черноты цвета.color.alpha()для получения альфа-канала цвета.
color.change($color,
$red: null, $green: null, $blue: null,
$hue: null, $saturation: null, $lightness: null,
$whiteness: null, $blackness: null,
$alpha: null)
change-color(...) //=> color - Dart Sass
- since 1.27.0
- LibSass
- ✗
- Ruby Sass
- ✗
Устанавливает одно или несколько свойств цвета на новые значения.
Использует значение, переданное для каждого аргумента ключевого слова, вместо соответствующего свойства цвета и возвращает измененный цвет. Ошибка при указании свойства RGB ($red, $green, и/или $blue) одновременно со свойством HSL ($hue, $saturation, и/или $lightness) или любой из них одновременно со свойством HWB ($hue, $whiteness, и/или $blackness).
Все необязательные аргументы должны быть числами. Аргументы $red, $green и $blue должны иметь значение без единиц измерения и находиться в диапазоне от 0 до 255 (включительно). Аргумент $hue должен иметь либо единицу deg, либо не иметь единицы. Аргументы $saturation, $lightness, $whiteness и $blackness должны находиться в диапазоне от 0% до 100% (включительно) и не могут быть безразмерными. Аргумент $alpha должен быть безразмерным и находиться в диапазоне от 0 до 1 (включительно).
Смотрите также:
color.scale()для плавного масштабирования свойств цвета.color.adjust()для настройки свойств цвета на фиксированное количество.
color.complement($color)
complement($color) //=> color Возвращает RGB дополнение из $color.
Это идентично color.adjust($color, $hue: 180deg).
darken($color, $amount) //=> color Делает $color темнее.
Сумма $amount должна быть числом от 0% до 100% (включительно). Уменьшает яркость HSL для $color на эту величину.
⚠️ Внимание!
Функция darken() уменьшает яркость на фиксированную величину, что часто не является желаемым эффектом. Чтобы сделать цвет на определенный процент темнее, чем он был раньше, используйте вместо этого color.scale().
Поскольку darken() - обычно не лучший способ сделать цвет темнее, он не включен непосредственно в новую модульную систему. Однако, если вам нужно сохранить существующее поведение, darken($color, $amount) можно записать color.adjust($color, $lightness: -$amount).
desaturate($color, $amount) //=> color Делает $color менее насыщенным.
Сумма $amount должна быть числом от 0% до 100% (включительно). Уменьшает HSL-насыщенность $color на эту величину.
⚠️ Внимание!
Функция desaturate() уменьшает насыщенность на фиксированную величину, что часто не является желаемым эффектом. Чтобы сделать цвет на определенный процент менее насыщенным, чем был раньше, используйте вместо него color.scale().
Поскольку desaturate() обычно не лучший способ сделать цвет менее насыщенным, он не включен непосредственно в новую модульную систему. Однако, если вам нужно сохранить существующее поведение, desaturate($color, $amount) можно записать color.adjust($color, $saturation: -$amount).
color.grayscale($color)
grayscale($color) //=> color Возвращает серый цвет той же яркости, что и $color.
Это идентично color.change($color, $saturation: 0%).
color.green($color)
green($color) //=> number Возвращает зеленый канал $color как число от 0 до 255.
Смотрите также:
color.red()для получения красного канала цвета.color.blue()для получения канала синего цвета.color.hue()для получения оттенка цвета.color.saturation()для получения насыщенности цвета.color.lightness()для получения яркости цвета.color.whiteness()для получения белизны цвета.color.blackness()для получения черноты цвета.color.alpha()для получения альфа-канала цвета.
color.hue($color)
hue($color) //=> number Возвращает оттенок $color как число от 0deg до 360deg.
Смотрите также:
color.red()для получения красного канала цвета.color.green()для получения зеленого канала цвета.color.blue()для получения канала синего цвета.color.saturation()для получения насыщенности цвета.color.lightness()для получения яркости цвета.color.whiteness()для получения белизны цвета.color.blackness()для получения черноты цвета.color.alpha()для получения альфа-канала цвета.
color.hwb($hue $whiteness $blackness)
color.hwb($hue $whiteness $blackness / $alpha)
color.hwb($hue, $whiteness, $blackness, $alpha: 1) //=> color - Dart Sass
- since 1.27.0
- LibSass
- ✗
- Ruby Sass
- ✗
Возвращает цвет с заданными [оттенком, белизной и чернотой]]hue, whiteness, and blackness и заданным альфа-каналом.
Оттенок - это число от 0deg до 360deg (включительно). Белизна и черный цвет - это числа от 0% до 100% (включительно). Оттенок может быть безразмерным, но для белизны и черноты должна быть единица %. Альфа-канал может быть указан либо как безразмерное число от 0 до 1 (включительно), либо как процентное соотношение между 0% и 100% (включительно).
⚠️ Внимание!
Специальные правила синтаксического анализа Sass для значений, разделенных косой чертой, затрудняют передачу переменных для $blackness или $alpha при использовании сигнатуры color.hwb($hue $whiteness $blackness / $alpha). Вместо этого рассмотрите возможность использования color.hwb($hue, $whiteness, $blackness, $alpha).
color.ie-hex-str($color)
ie-hex-str($color) //=> unquoted string Возвращает строку без кавычек, которая представляет $color в формате #AARRGGBB, ожидаемом свойством Internet Explorer -ms-filter.
color.invert($color, $weight: 100%)
invert($color, $weight: 100%) //=> color Возвращает обратное или отрицательное значение $color.
$weight должен быть числом от 0% до 100% (включительно). Более высокий вес означает, что результат будет ближе к отрицательному, а меньший вес означает, что он будет ближе к $color. Вес 50% всегда будет давать #808080.
lighten($color, $amount) //=> color Делает $color светлее.
Сумма $amount должна быть числом от 0% до 100% (включительно). На эту величину увеличивает яркость HSL для $color.
⚠️ Внимание!
Функция lighten() увеличивает яркость на фиксированную величину, что часто не является желаемым эффектом. Чтобы сделать цвет на определенный процент светлее, чем был раньше, используйте вместо него scale().
Поскольку lighten() обычно не лучший способ сделать цвет светлее, он не включен непосредственно в новую модульную систему. Однако, если вам нужно сохранить существующее поведение, lighten($color, $amount) можно записать adjust($color, $lightness: $amount).
color.lightness($color)
lightness($color) //=> number Возвращает HSL-яркость $color как число от 0% до 100%.
Смотрите также:
color.red()для получения красного канала цвета.color.green()для получения зеленого канала цвета.color.blue()для получения канала синего цвета.color.hue()для получения оттенка цвета.color.saturation()для получения насыщенности цвета.color.whiteness()для получения белизны цвета.color.blackness()для получения черноты цвета.color.alpha()для получения альфа-канала цвета.
color.mix($color1, $color2, $weight: 50%)
mix($color1, $color2, $weight: 50%) //=> color Возвращает цвет, представляющий собой смесь цветов $color1 и $color2.
И $weight, и относительная непрозрачность каждого цвета определяют, сколько каждого цвета будет в результате. Значение $weight должно быть числом от 0% до 100% (включительно). Больший вес указывает, что следует использовать больше $color1, а меньший вес указывает, что следует использовать больше $color2.
opacify($color, $amount)
fade-in($color, $amount) //=> color Делает $color более непрозрачным.
Сумма $amount должна быть числом от 0 до 1 (включительно). Увеличивает альфа-канал $color на эту величину.
⚠️ Внимание!
Функция opacify() увеличивает альфа-канал на фиксированную величину, что часто не является желаемым эффектом. Чтобы сделать цвет на определенный процент более непрозрачным, чем был раньше, используйте вместо этого scale().
Поскольку opacify() обычно не лучший способ сделать цвет более непрозрачным, он не включен непосредственно в новую модульную систему. Однако, если вам нужно сохранить существующее поведение, opacify($color, $amount) можно записать adjust($color, $alpha: -$amount).
color.red($color)
red($color) //=> number Возвращает красный канал $color как число от 0 до 255.
Смотрите также:
color.green()для получения зеленого канала цвета.color.blue()для получения канала синего цвета.color.hue()для получения оттенка цвета.color.saturation()для получения насыщенности цвета.color.lightness()для получения яркости цвета.color.whiteness()для получения белизны цвета.color.blackness()для получения черноты цвета.color.alpha()для получения альфа-канала цвета.
saturate($color, $amount)
saturate($color, $amount) //=> color Делает $color более насыщенным.
Сумма $amount должна быть числом от 0% до 100% (включительно). Увеличивает HSL-насыщенность $color на эту величину.
⚠️ Внимание!
Функция saturate() увеличивает насыщенность на фиксированную величину, что часто не является желаемым эффектом. Чтобы сделать цвет на определенный процент более насыщенным, чем был раньше, используйте вместо этого scale() instead.
Поскольку saturate() обычно не лучший способ сделать цвет более насыщенным, он не включен непосредственно в новую модульную систему. Однако, если вам нужно сохранить существующее поведение, saturate($color, $amount) может быть записано adjust($color, $saturation: $amount).
color.saturation($color)
saturation($color) //=> number Возвращает HSL-насыщенность $color как число от 0% до 100%.
Смотрите также:
color.red()для получения красного канала цвета.color.green()для получения зеленого канала цвета.color.blue()для получения канала синего цвета.color.hue()для получения оттенка цвета.color.lightness()для получения яркости цвета.color.whiteness()для получения белизны цвета.color.blackness()для получения черноты цвета.color.alpha()для получения альфа-канала цвета.
color.scale($color,
$red: null, $green: null, $blue: null,
$saturation: null, $lightness: null,
$whiteness: null, $blackness: null,
$alpha: null)
scale-color(...) //=> color - Dart Sass
- since 1.27.0
- LibSass
- ✗
- Ruby Sass
- ✗
Плавно масштабирует одно или несколько свойств $color.
Каждый аргумент ключевого слова должен быть числом от -100% до 100% (включительно). Это указывает, как далеко соответствующее свойство должно быть перемещено от исходного положения к максимуму (если аргумент положительный) или минимуму (если аргумент отрицательный). Это означает, что, например, $lightness: 50% сделает все цвета 50% ближе к максимальной яркости, не делая их полностью белыми.
Ошибка при указании свойства RGB ($red, $green, и/или $blue) одновременно со свойством HSL ($saturation, и/или $lightness), или любое из них одновременно со свойством HWB ($whiteness, и/или $blackness).
Смотрите также:
color.adjust()для изменения свойств цвета на фиксированное количество.color.change()для установки свойств цвета.
transparentize($color, $amount)
fade-out($color, $amount) //=> color Делает $color более прозрачным.
Сумма $amount должна быть числом от 0 до 1 (включительно). Уменьшает альфа-канал $color на эту величину.
⚠️ Внимание!
Функция transparentize() уменьшает альфа-канал на фиксированную величину, что часто не является желаемым эффектом. Чтобы сделать цвет на определенный процент более прозрачным, чем был раньше, используйте вместо этого color.scale().
Поскольку transparentize() обычно не лучший способ сделать цвет более прозрачным, он не включен непосредственно в новую модульную систему. Однако, если вам нужно сохранить существующее поведение, для transparentize($color, $amount) можно записать color.adjust($color, $alpha: -$amount).
color.whiteness($color) //=> number - Dart Sass
- since 1.27.0
- LibSass
- ✗
- Ruby Sass
- ✗
Возвращает HWB белизну $color как число от 0% до 100%.
Смотрите также:
color.red()для получения красного канала цвета.color.green()для получения зеленого канала цвета.color.hue()для получения оттенка цвета.color.saturation()для получения насыщенности цвета.color.lightness()для получения яркости цвета.color.blackness()для получения черноты цвета.color.alpha()для получения альфа-канала цвета.