Skip to main content

color-function-notation

指定颜色函数的现代或传统符号。

¥Specify modern or legacy notation for color-functions.

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

 *             This notation */

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

¥Modern color-functions use a comma-free syntax because functions in CSS are used to group/name a syntax chunk. They should work by the same rules that CSS grammar does in general: values are optional and re-orderable when possible, space-separated, and commas are used to separate repetitions only.

由于历史原因，rgb() 和 hsl() 还支持替代语法，用逗号分隔其所有参数。另外，由于历史原因，rgba() 和 hsla() 函数使用相同的基于逗号的语法。

¥For legacy reasons, rgb() and hsl() also supports an alternate syntax that separates all of its arguments with commas. Also for legacy reasons, the rgba() and hsla() functions exist using the same comma-based syntax.

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

¥The fix option can automatically fix some of the problems reported by this rule when the primary option is "modern".

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

¥The message secondary option can accept the arguments of this rule.

选项​

¥Options

string："modern"|"legacy"

"modern"​

适用的颜色函数必须始终使用现代符号。

¥Applicable color-functions must always use modern notation.

以下模式被视为问题：

¥The following patterns are considered problems:

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%) }

以下模式不被视为问题：

¥The following patterns are not considered problems:

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%) }

"legacy"​

适用的颜色函数必须始终使用旧的符号。

¥Applicable color-functions must always use the legacy notation.

以下模式被视为问题：

¥The following patterns are considered problems:

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%) }

以下模式不被视为问题：

¥The following patterns are not considered problems:

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%) }

可选的辅助选项​

¥Optional secondary options

ignore: ["with-var-inside"]​

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

¥Ignore color functions containing variables.

鉴于：

¥Given:

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

以下模式不被视为问题：

¥The following patterns are not considered problems:

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

鉴于：

¥Given:

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

以下模式不被视为问题：

¥The following patterns are not considered problems:

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