color-function-notation

指定颜色函数的现代或传统表示法。

    a { color: rgb(0 0 0 / 0.2) }
/**            ↑
 *             This notation */

现代颜色函数使用无逗号语法，因为 CSS 中的函数用于对语法块进行分组/命名。它们应该遵循 CSS 语法的一般规则：值是可选的，并在可能的情况下可以重新排序，用空格分隔，逗号仅用于分隔重复项。

出于传统原因，rgb() 和 hsl() 也支持一种备用语法，该语法用逗号分隔所有参数。同样出于传统原因，rgba() 和 hsla() 函数使用相同的基于逗号的语法。

当主要选项为 "modern" 时，fix 选项可以自动修复此规则报告的一些问题。

message 次要选项可以接受此规则的参数。

选项

string: "modern"|"legacy"

适用的颜色函数必须始终使用现代表示法。

以下模式被视为问题

a { color: rgb(0, 0, 0) }

a { color: rgba(12, 122, 231, 0.2) }

a { color: hsla(270, 60%, 50%, 15%) }

a { color: hsl(.75turn, 60%, 70%) }

以下模式不被视为问题

a { color: rgb(0 0 0) }

a { color: rgb(12 122 231 / 0.2) }

a { color: hsl(270 60% 50% / 15%) }

a { color: hsl(.75turn 60% 70%) }

适用的颜色函数必须始终使用传统表示法。

以下模式被视为问题

a { color: rgb(0 0 0) }

a { color: rgb(12 122 231 / 0.2) }

a { color: hsl(270 60% 50% / 15%) }

a { color: hsl(.75turn 60% 70%) }

以下模式不被视为问题

a { color: rgb(0, 0, 0) }

a { color: rgba(12, 122, 231, 0.2) }

a { color: hsla(270, 60%, 50%, 15%) }

a { color: hsl(.75turn, 60%, 70%) }

忽略包含变量的颜色函数。

给定

["modern", { "ignore": ["with-var-inside"] }]

以下模式不被视为问题

a {
  color: rgba(var(--foo), 0.5);
}

给定

["legacy", { "ignore": ["with-var-inside"] }]

以下模式不被视为问题

a {
  color: rgba(var(--foo) / 0.5);
}