sass:color

Совместимость:
Dart Sass
since 1.23.0
LibSass
✗
Ruby Sass
✗

В настоящее время только Dart Sass поддерживает загрузку встроенных модулей с помощью @use. Пользователи других реализаций должны вместо этого вызывать функции, используя их глобальные имена.

color.adjust($color,
  $red: null, $green: null, $blue: null,
  $hue: null, $saturation: null, $lightness: null,
  $whiteness: null, $blackness: null,
  $alpha: null)
adjust-color(...) //=> color
Совместимость ($whiteness and $blackness):
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() для установки свойств цвета.

SCSS Syntax

@debug color.adjust(#6b717f, $red: 15); // #7a717f
@debug color.adjust(#d2e1dd, $red: -10, $blue: 10); // #c8e1e7
@debug color.adjust(#998099, $lightness: -30%, $alpha: -0.4); // rgba(71, 57, 71, 0.6)

Sass Syntax

@debug color.adjust(#6b717f, $red: 15)  // #7a717f
@debug color.adjust(#d2e1dd, $red: -10, $blue: 10)  // #c8e1e7
@debug color.adjust(#998099, $lightness: -30%, $alpha: -0.4)  // rgba(71, 57, 71, 0.6)

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).

SCSS Syntax

// Hue 222deg becomes 282deg.
@debug adjust-hue(#6b717f, 60deg); // #796b7f

// Hue 164deg becomes 104deg.
@debug adjust-hue(#d2e1dd, -60deg); // #d6e1d2

// Hue 210deg becomes 255deg.
@debug adjust-hue(#036, 45); // #1a0066

Sass Syntax

// Hue 222deg becomes 282deg.
@debug adjust-hue(#6b717f, 60deg)  // #796b7f

// Hue 164deg becomes 104deg.
@debug adjust-hue(#d2e1dd, -60deg)  // #d6e1d2

// Hue 210deg becomes 255deg.
@debug adjust-hue(#036, 45)  // #1a0066

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() для получения яркости цвета.

SCSS Syntax

@debug color.alpha(#e1d7d2); // 1
@debug color.opacity(rgb(210, 225, 221, 0.4)); // 0.4
@debug alpha(opacity=20); // alpha(opacity=20)

Sass Syntax

@debug color.alpha(#e1d7d2)  // 1
@debug color.opacity(rgb(210, 225, 221, 0.4))  // 0.4
@debug alpha(opacity=20)  // alpha(opacity=20)

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() для получения альфа-канала цвета.

SCSS Syntax

@debug color.blackness(#e1d7d2); // 11.7647058824%
@debug color.blackness(white); // 0%
@debug color.blackness(black); // 100%

Sass Syntax

@debug color.blackness(#e1d7d2)  // 11.7647058824%
@debug color.blackness(white)  // 0%
@debug color.blackness(black)  // 100%

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() для получения альфа-канала цвета.

SCSS Syntax

@debug color.blue(#e1d7d2); // 210
@debug color.blue(white); // 255
@debug color.blue(black); // 0

Sass Syntax

@debug color.blue(#e1d7d2)  // 210
@debug color.blue(white)  // 255
@debug color.blue(black)  // 0

color.change($color,
  $red: null, $green: null, $blue: null,
  $hue: null, $saturation: null, $lightness: null,
  $whiteness: null, $blackness: null,
  $alpha: null)
change-color(...) //=> color
Совместимость ($whiteness and $blackness):
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() для настройки свойств цвета на фиксированное количество.

SCSS Syntax

@debug color.change(#6b717f, $red: 100); // #64717f
@debug color.change(#d2e1dd, $red: 100, $blue: 50); // #64e132
@debug color.change(#998099, $lightness: 30%, $alpha: 0.5); // rgba(85, 68, 85, 0.5)

Sass Syntax

@debug color.change(#6b717f, $red: 100)  // #64717f
@debug color.change(#d2e1dd, $red: 100, $blue: 50)  // #64e132
@debug color.change(#998099, $lightness: 30%, $alpha: 0.5)  // rgba(85, 68, 85, 0.5)

color.complement($color)
complement($color) //=> color

Возвращает RGB дополнение из $color.

Это идентично color.adjust($color, $hue: 180deg).

SCSS Syntax

// Hue 222deg becomes 42deg.
@debug color.complement(#6b717f); // #7f796b

// Hue 164deg becomes 344deg.
@debug color.complement(#d2e1dd); // #e1d2d6

// Hue 210deg becomes 30deg.
@debug color.complement(#036); // #663300

Sass Syntax

// Hue 222deg becomes 42deg.
@debug color.complement(#6b717f)  // #7f796b

// Hue 164deg becomes 344deg.
@debug color.complement(#d2e1dd)  // #e1d2d6

// Hue 210deg becomes 30deg.
@debug color.complement(#036)  // #663300

darken($color, $amount) //=> color

Делает $color темнее.

Сумма $amount должна быть числом от 0% до 100% (включительно). Уменьшает яркость HSL для $color на эту величину.

⚠️ Внимание!

Функция darken() уменьшает яркость на фиксированную величину, что часто не является желаемым эффектом. Чтобы сделать цвет на определенный процент темнее, чем он был раньше, используйте вместо этого color.scale().

Поскольку darken() - обычно не лучший способ сделать цвет темнее, он не включен непосредственно в новую модульную систему. Однако, если вам нужно сохранить существующее поведение, darken($color, $amount) можно записать color.adjust($color, $lightness: -$amount).

SCSS Syntax

// #036 has lightness 20%, so when darken() subtracts 30% it just returns black.
@debug darken(#036, 30%); // black

// scale() instead makes it 30% darker than it was originally.
@debug color.scale(#036, $lightness: -30%); // #002447

Sass Syntax

// #036 has lightness 20%, so when darken() subtracts 30% it just returns black.
@debug darken(#036, 30%)  // black

// scale() instead makes it 30% darker than it was originally.
@debug color.scale(#036, $lightness: -30%)  // #002447

SCSS Syntax

// Lightness 92% becomes 72%.
@debug darken(#b37399, 20%); // #7c4465

// Lightness 85% becomes 45%.
@debug darken(#f2ece4, 40%); // #b08b5a

// Lightness 20% becomes 0%.
@debug darken(#036, 30%); // black

Sass Syntax

// Lightness 92% becomes 72%.
@debug darken(#b37399, 20%)  // #7c4465

// Lightness 85% becomes 45%.
@debug darken(#f2ece4, 40%)  // #b08b5a

// Lightness 20% becomes 0%.
@debug darken(#036, 30%)  // black

desaturate($color, $amount) //=> color

Делает $color менее насыщенным.

Сумма $amount должна быть числом от 0% до 100% (включительно). Уменьшает HSL-насыщенность $color на эту величину.

⚠️ Внимание!

Функция desaturate() уменьшает насыщенность на фиксированную величину, что часто не является желаемым эффектом. Чтобы сделать цвет на определенный процент менее насыщенным, чем был раньше, используйте вместо него color.scale().

Поскольку desaturate() обычно не лучший способ сделать цвет менее насыщенным, он не включен непосредственно в новую модульную систему. Однако, если вам нужно сохранить существующее поведение, desaturate($color, $amount) можно записать color.adjust($color, $saturation: -$amount).

SCSS Syntax

// #d2e1dd has saturation 20%, so when desaturate() subtracts 30% it just
// returns gray.
@debug desaturate(#d2e1dd, 30%); // #dadada

// scale() instead makes it 30% less saturated than it was originally.
@debug color.scale(#6b717f, $saturation: -30%); // #6e727c

Sass Syntax

// #6b717f has saturation 20%, so when desaturate() subtracts 30% it just
// returns gray.
@debug desaturate(#d2e1dd, 30%)  // #dadada

// scale() instead makes it 30% less saturated than it was originally.
@debug color.scale(#6b717f, $saturation: -30%)  // #6e727c

SCSS Syntax

// Saturation 100% becomes 80%.
@debug desaturate(#036, 20%); // #0a335c

// Saturation 35% becomes 15%.
@debug desaturate(#f2ece4, 20%); // #eeebe8

// Saturation 20% becomes 0%.
@debug desaturate(#d2e1dd, 30%); // #dadada

Sass Syntax

// Saturation 100% becomes 80%.
@debug desaturate(#036, 20%)  // #0a335c

// Saturation 35% becomes 15%.
@debug desaturate(#f2ece4, 20%)  // #eeebe8

// Saturation 20% becomes 0%.
@debug desaturate(#d2e1dd, 30%)  // #dadada

color.grayscale($color)
grayscale($color) //=> color

Возвращает серый цвет той же яркости, что и $color.

Это идентично color.change($color, $saturation: 0%).

SCSS Syntax

@debug color.grayscale(#6b717f); // #757575
@debug color.grayscale(#d2e1dd); // #dadada
@debug color.grayscale(#036); // #333333

Sass Syntax

@debug color.grayscale(#6b717f)  // #757575
@debug color.grayscale(#d2e1dd)  // #dadada
@debug color.grayscale(#036)  // #333333

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() для получения альфа-канала цвета.

SCSS Syntax

@debug color.green(#e1d7d2); // 215
@debug color.green(white); // 255
@debug color.green(black); // 0

Sass Syntax

@debug color.green(#e1d7d2)  // 215
@debug color.green(white)  // 255
@debug color.green(black)  // 0

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() для получения альфа-канала цвета.

SCSS Syntax

@debug color.hue(#e1d7d2); // 20deg
@debug color.hue(#f2ece4); // 34.2857142857deg
@debug color.hue(#dadbdf); // 228deg

Sass Syntax

@debug color.hue(#e1d7d2)  // 20deg
@debug color.hue(#f2ece4)  // 34.2857142857deg
@debug color.hue(#dadbdf)  // 228deg

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).

SCSS Syntax

@debug color.hwb(210, 0%, 60%); // #036
@debug color.hwb(34, 89%, 5%); // #f2ece4
@debug color.hwb(210 0% 60% / 0.5); // rgba(0, 51, 102, 0.5)

Sass Syntax

@debug color.hwb(210, 0%, 60%)  // #036
@debug color.hwb(34, 89%, 5%)  // #f2ece4
@debug color.hwb(210 0% 60% / 0.5)  // rgba(0, 51, 102, 0.5)

color.ie-hex-str($color)
ie-hex-str($color) //=> unquoted string

Возвращает строку без кавычек, которая представляет $color в формате #AARRGGBB, ожидаемом свойством Internet Explorer -ms-filter.

SCSS Syntax

@debug color.ie-hex-str(#b37399); // #FFB37399
@debug color.ie-hex-str(#808c99); // #FF808C99
@debug color.ie-hex-str(rgba(242, 236, 228, 0.6)); // #99F2ECE4

Sass Syntax

@debug color.ie-hex-str(#b37399); // #FFB37399
@debug color.ie-hex-str(#808c99); // #FF808C99
@debug color.ie-hex-str(rgba(242, 236, 228, 0.6)); // #99F2ECE4

color.invert($color, $weight: 100%)
invert($color, $weight: 100%) //=> color

Возвращает обратное или отрицательное значение $color.

$weight должен быть числом от 0% до 100% (включительно). Более высокий вес означает, что результат будет ближе к отрицательному, а меньший вес означает, что он будет ближе к $color. Вес 50% всегда будет давать #808080.

SCSS Syntax

@debug color.invert(#b37399); // #4c8c66
@debug color.invert(black); // white
@debug color.invert(#550e0c, 20%); // #663b3a

Sass Syntax

@debug color.invert(#b37399)  // #4c8c66
@debug color.invert(black)  // white
@debug color.invert(#550e0c, 20%)  // #663b3a

lighten($color, $amount) //=> color

Делает $color светлее.

Сумма $amount должна быть числом от 0% до 100% (включительно). На эту величину увеличивает яркость HSL для $color.

⚠️ Внимание!

Функция lighten() увеличивает яркость на фиксированную величину, что часто не является желаемым эффектом. Чтобы сделать цвет на определенный процент светлее, чем был раньше, используйте вместо него scale().

Поскольку lighten() обычно не лучший способ сделать цвет светлее, он не включен непосредственно в новую модульную систему. Однако, если вам нужно сохранить существующее поведение, lighten($color, $amount) можно записать adjust($color, $lightness: $amount).

SCSS Syntax

// #e1d7d2 has lightness 85%, so when lighten() adds 30% it just returns white.
@debug lighten(#e1d7d2, 30%); // white

// scale() instead makes it 30% lighter than it was originally.
@debug color.scale(#e1d7d2, $lightness: 30%); // #eae3e0

Sass Syntax

// #e1d7d2 has lightness 85%, so when lighten() adds 30% it just returns white.
@debug lighten(#e1d7d2, 30%)  // white

// scale() instead makes it 30% lighter than it was originally.
@debug color.scale(#e1d7d2, $lightness: 30%)  // #eae3e0

SCSS Syntax

// Lightness 46% becomes 66%.
@debug lighten(#6b717f, 20%); // #a1a5af

// Lightness 20% becomes 80%.
@debug lighten(#036, 60%); // #99ccff

// Lightness 85% becomes 100%.
@debug lighten(#e1d7d2, 30%); // white

Sass Syntax

// Lightness 46% becomes 66%.
@debug lighten(#6b717f, 20%)  // #a1a5af

// Lightness 20% becomes 80%.
@debug lighten(#036, 60%)  // #99ccff

// Lightness 85% becomes 100%.
@debug lighten(#e1d7d2, 30%)  // white

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() для получения альфа-канала цвета.

SCSS Syntax

@debug color.lightness(#e1d7d2); // 85.2941176471%
@debug color.lightness(#f2ece4); // 92.1568627451%
@debug color.lightness(#dadbdf); // 86.4705882353%

Sass Syntax

@debug color.lightness(#e1d7d2)  // 85.2941176471%
@debug color.lightness(#f2ece4)  // 92.1568627451%
@debug color.lightness(#dadbdf)  // 86.4705882353%

color.mix($color1, $color2, $weight: 50%)
mix($color1, $color2, $weight: 50%) //=> color

Возвращает цвет, представляющий собой смесь цветов $color1 и $color2.

И $weight, и относительная непрозрачность каждого цвета определяют, сколько каждого цвета будет в результате. Значение $weight должно быть числом от 0% до 100% (включительно). Больший вес указывает, что следует использовать больше $color1, а меньший вес указывает, что следует использовать больше $color2.

SCSS Syntax

@debug color.mix(#036, #d2e1dd); // #698aa2
@debug color.mix(#036, #d2e1dd, 75%); // #355f84
@debug color.mix(#036, #d2e1dd, 25%); // #9eb6bf
@debug color.mix(rgba(242, 236, 228, 0.5), #6b717f); // rgba(141, 144, 152, 0.75)

Sass Syntax

@debug color.mix(#036, #d2e1dd)  // #698aa2
@debug color.mix(#036, #d2e1dd, 75%)  // #355f84
@debug color.mix(#036, #d2e1dd, 25%)  // #9eb6bf
@debug color.mix(rgba(242, 236, 228, 0.5), #6b717f)  // rgba(141, 144, 152, 0.75)

opacify($color, $amount)
fade-in($color, $amount) //=> color

Делает $color более непрозрачным.

Сумма $amount должна быть числом от 0 до 1 (включительно). Увеличивает альфа-канал $color на эту величину.

⚠️ Внимание!

Функция opacify() увеличивает альфа-канал на фиксированную величину, что часто не является желаемым эффектом. Чтобы сделать цвет на определенный процент более непрозрачным, чем был раньше, используйте вместо этого scale().

Поскольку opacify() обычно не лучший способ сделать цвет более непрозрачным, он не включен непосредственно в новую модульную систему. Однако, если вам нужно сохранить существующее поведение, opacify($color, $amount) можно записать adjust($color, $alpha: -$amount).

SCSS Syntax

// rgba(#036, 0.7) has alpha 0.7, so when opacify() adds 0.3 it returns a fully
// opaque color.
@debug opacify(rgba(#036, 0.7), 0.3); // #036

// scale() instead makes it 30% more opaque than it was originally.
@debug color.scale(rgba(#036, 0.7), $alpha: 30%); // rgba(0, 51, 102, 0.79)

Sass Syntax

// rgba(#036, 0.7) has alpha 0.7, so when opacify() adds 0.3 it returns a fully
// opaque color.
@debug opacify(rgba(#036, 0.7), 0.3)  // #036

// scale() instead makes it 30% more opaque than it was originally.
@debug color.scale(rgba(#036, 0.7), $alpha: 30%)  // rgba(0, 51, 102, 0.79)

SCSS Syntax

@debug opacify(rgba(#6b717f, 0.5), 0.2); // rgba(107, 113, 127, 0.7)
@debug fade-in(rgba(#e1d7d2, 0.5), 0.4); // rgba(225, 215, 210, 0.9)
@debug opacify(rgba(#036, 0.7), 0.3); // #036

Sass Syntax

@debug opacify(rgba(#6b717f, 0.5), 0.2)  // rgba(107, 113, 127, 0.7)
@debug fade-in(rgba(#e1d7d2, 0.5), 0.4)  // rgba(225, 215, 210, 0.9)
@debug opacify(rgba(#036, 0.7), 0.3)  // #036

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() для получения альфа-канала цвета.

SCSS Syntax

@debug color.red(#e1d7d2); // 225
@debug color.red(white); // 255
@debug color.red(black); // 0

Sass Syntax

@debug color.red(#e1d7d2)  // 225
@debug color.red(white)  // 255
@debug color.red(black)  // 0

saturate($color, $amount)
saturate($color, $amount) //=> color

Делает $color более насыщенным.

Сумма $amount должна быть числом от 0% до 100% (включительно). Увеличивает HSL-насыщенность $color на эту величину.

⚠️ Внимание!

Функция saturate() увеличивает насыщенность на фиксированную величину, что часто не является желаемым эффектом. Чтобы сделать цвет на определенный процент более насыщенным, чем был раньше, используйте вместо этого scale() instead.

Поскольку saturate() обычно не лучший способ сделать цвет более насыщенным, он не включен непосредственно в новую модульную систему. Однако, если вам нужно сохранить существующее поведение, saturate($color, $amount) может быть записано adjust($color, $saturation: $amount).

SCSS Syntax

// #0e4982 has saturation 80%, so when saturate() adds 30% it just becomes
// fully saturated.
@debug saturate(#0e4982, 30%); // #004990

// scale() instead makes it 30% more saturated than it was originally.
@debug color.scale(#0e4982, $saturation: 30%); // #0a4986

Sass Syntax

// #0e4982 has saturation 80%, so when saturate() adds 30% it just becomes
// fully saturated.
@debug saturate(#0e4982, 30%)  // #004990

// scale() instead makes it 30% more saturated than it was originally.
@debug color.scale(#0e4982, $saturation: 30%)  // #0a4986

SCSS Syntax

// Saturation 50% becomes 70%.
@debug saturate(#c69, 20%); // #e05299

// Saturation 35% becomes 85%.
@debug desaturate(#f2ece4, 50%); // #ebebeb

// Saturation 80% becomes 100%.
@debug saturate(#0e4982, 30%)  // #004990

Sass Syntax

// Saturation 50% becomes 70%.
@debug saturate(#c69, 20%); // #e05299

// Saturation 35% becomes 85%.
@debug desaturate(#f2ece4, 50%); // #ebebeb

// Saturation 80% becomes 100%.
@debug saturate(#0e4982, 30%)  // #004990

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() для получения альфа-канала цвета.

SCSS Syntax

@debug color.saturation(#e1d7d2); // 20%
@debug color.saturation(#f2ece4); // 30%
@debug color.saturation(#dadbdf); // 7.2463768116%

Sass Syntax

@debug color.saturation(#e1d7d2)  // 20%
@debug color.saturation(#f2ece4)  // 30%
@debug color.saturation(#dadbdf)  // 7.2463768116%

color.scale($color,
  $red: null, $green: null, $blue: null,
  $saturation: null, $lightness: null,
  $whiteness: null, $blackness: null,
  $alpha: null)
scale-color(...) //=> color
Совместимость ($whiteness and $blackness):
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() для установки свойств цвета.

SCSS Syntax

@debug color.scale(#6b717f, $red: 15%); // #81717f
@debug color.scale(#d2e1dd, $lightness: -10%, $saturation: 10%); // #b3d4cb
@debug color.scale(#998099, $alpha: -40%); // rgba(153, 128, 153, 0.6)

Sass Syntax

@debug color.scale(#6b717f, $red: 15%)  // #81717f
@debug color.scale(#d2e1dd, $lightness: -10%, $saturation: 10%)  // #b3d4cb
@debug color.scale(#998099, $alpha: -40%)  // rgba(153, 128, 153, 0.6)

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).

SCSS Syntax

// rgba(#036, 0.3) has alpha 0.3, so when transparentize() subtracts 0.3 it
// returns a fully transparent color.
@debug transparentize(rgba(#036, 0.3), 0.3); // rgba(0, 51, 102, 0)

// scale() instead makes it 30% more transparent than it was originally.
@debug color.scale(rgba(#036, 0.3), $alpha: -30%); // rgba(0, 51, 102, 0.21)

Sass Syntax

// rgba(#036, 0.3) has alpha 0.3, so when transparentize() subtracts 0.3 it
// returns a fully transparent color.
@debug transparentize(rgba(#036, 0.3), 0.3)  // rgba(0, 51, 102, 0)

// scale() instead makes it 30% more transparent than it was originally.
@debug color.scale(rgba(#036, 0.3), $alpha: -30%)  // rgba(0, 51, 102, 0.21)

SCSS Syntax

@debug transparentize(rgba(#6b717f, 0.5), 0.2)  // rgba(107, 113, 127, 0.3)
@debug fade-out(rgba(#e1d7d2, 0.5), 0.4)  // rgba(225, 215, 210, 0.1)
@debug transparentize(rgba(#036, 0.3), 0.3)  // rgba(0, 51, 102, 0)

Sass Syntax

@debug transparentize(rgba(#6b717f, 0.5), 0.2)  // rgba(107, 113, 127, 0.3)
@debug fade-out(rgba(#e1d7d2, 0.5), 0.4)  // rgba(225, 215, 210, 0.1)
@debug transparentize(rgba(#036, 0.3), 0.3)  // rgba(0, 51, 102, 0)

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() для получения альфа-канала цвета.

SCSS Syntax

@debug color.whiteness(#e1d7d2); // 82.3529411765%
@debug color.whiteness(white); // 100%
@debug color.whiteness(black); // 0%

Sass Syntax

@debug color.whiteness(#e1d7d2)  // 82.3529411765%
@debug color.whiteness(white)  // 100%
@debug color.whiteness(black)  // 0%