`<dashed-function>` тип CSS

<dashed-function> — это CSS-тип данных, представляющий синтаксис вызова пользовательских функций CSS, определяемых с помощью at-правила @function.

Синтаксис

Значение <dashed-function> состоит из --function-name, за которым следуют круглые скобки с аргументами функции (например, --my-function(30px, 3)).

Значения <dashed-function> можно использовать вместо обычных значений свойств CSS или их компонентов, если требуется динамически вычислять значения на основе логики функции, а не задавать их статически.

Если требуется передать в качестве аргументов значения, содержащие запятые, их можно обернуть в фигурные скобки ({ }).

Примеры

Другие примеры см. в руководстве Использование пользовательских функций CSS.

Основы использования <dashed-function>

В этом примере показана простая функция, которая возвращает полупрозрачную версию переданного ей цвета.

HTML

Разметка содержит элемент <p> с текстом:

<p>Some content</p>

CSS

Сначала в стилях определим пользовательскую функцию CSS. Функция называется --transparent и принимает два параметра: цвет и числовое значение альфа-канала. В теле функции мы используем синтаксис относительных цветов, чтобы преобразовать переданный цвет в цвет oklch() с альфа-каналом, равным переданному значению; это и будет result функции:

@function --transparent(--color <color>, --alpha <number>) {
  result: oklch(from var(--color) l c h / var(--alpha));
}

Затем мы задаём пользовательское свойство --base-color со значением #faa6ff для элемента :root. Мы назначаем это свойство в качестве цвета border элемента <p>, а затем задаём для его свойства background-color значение, равное прозрачной версии того же цвета. Для этого задаём значение с помощью синтаксиса <dashed-function>, указываем функцию --transparent() и передаём ей аргументы var(--base-color) и 0.8.

html,
body {
  height: 100%;
}

body {
  margin: 0;
  display: grid;
  place-items: center;
  font-family: system-ui;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 20px,
    lightgrey 20px 40px
  );
}

:root {
  --base-color: #faa6ff;
}

p {
  width: 50%;
  padding: 30px;
  border-radius: 20px;
  border: 3px solid var(--base-color);
  background-color: --transparent(var(--base-color), 0.8);
}

Результат

Спецификации

Совместимость с браузерами

См. также

• Пользовательские свойства CSS
• @function at-правило
• Функция type()
• Использование пользовательских функций CSS
• Модуль пользовательских функций и миксинов CSS