color-function-notation

為色彩函數指定現代或傳統符號。

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

現代色彩函數使用無逗號的語法，因為 CSS 中的函數用於將語法區塊分組/命名。它們應遵循 CSS 語法的一般規則：值是可選的，且在可能的情況下可以重新排序、以空格分隔，並且逗號僅用於分隔重複項。

基於傳統原因，rgb() 和 hsl() 也支援以逗號分隔所有引數的備用語法。同樣基於傳統原因，rgba() 和 hsla() 函數使用相同的以逗號為基礎的語法。

當主要選項為 "modern" 時，fix 選項可以自動修正此規則報告的一些問題。

message 次要選項可以接受此規則的引數。

選項

字串："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);
}