跳至主要內容

color-named

要求(如果可能)或不允許命名顏色。

a { color: black }
/** ↑
* This named color */

此規則忽略 $sass@less 變數語法。

選項

字串"always-where-possible"|"never"

"always-where-possible"

顏色必須總是在可能的情況下命名。

如果 16 進位(3、4、6 和 8 位元組)、rgb()rgba()hsl()hsla()hwb()gray() 顏色可以表示為命名顏色,這將會抱怨。

以下模式被視為問題

a { color: #000; }
a { color: #f000; }
a { color: #ff000000; }
a { color: rgb(0, 0, 0); }
a { color: rgb(0%, 0%, 0%); }
a { color: rgba(0, 0, 0, 0); }
a { color: hsl(0, 0%, 0%); }
a { color: hwb(0, 0%, 100%); }
a { color: gray(0); }

以下模式不是被視為問題

a { color: black; }
a { color: rgb(10, 0, 0); }
a { color: rgb(0, 0, 0, 0.5); }

"never"

顏色絕不能命名。

以下模式被視為問題

a { color: black; }
a { color: white; }

以下模式不是被視為問題

a { color: #000; }
a { color: rgb(0, 0, 0); }
a { color: var(--white); }

可選的次要選項

ignore: ["inside-function"]

忽略函式內的顏色。

例如,使用 "never"

以下模式不是被視為問題

a {
color: map-get($color, blue);
}
a {
background-image: url(red);
}

ignoreProperties: ["/regex/", /regex/, "string"]

例如,使用 "never"

給定

["/^my-/", "composes"]

以下模式不是被視為問題

a {
my-property: red;
}
a {
my-other-property: red;
}
a {
composes: red from './index.css';
}