Skip to main content

color-named

要求（如果可能）或不允许命名颜色。

¥Require (where possible) or disallow named colors.

a { color: black }
/**        ↑

 * This named color */

此规则忽略 $sass 和 @less 变量语法。

¥This rule ignores $sass and @less variable syntaxes.

选项​

¥Options

"always-where-possible"​

在可能的情况下，颜色必须始终被命名。

¥Colors must always, where possible, be named.

{
  "color-named": "always-where-possible"
}

如果十六进制（3、4、6 和 8 位数字）、rgb()、rgba()、hsl()、hsla()、hwb() 或 gray() 颜色可以表示为命名颜色，则会报错。

¥This will complain if a hex (3, 4, 6 and 8 digit), rgb(), rgba(), hsl(), hsla(), hwb() or gray() color can be represented as a named color.

以下模式被视为问题：

¥The following patterns are considered problems:

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

以下模式不被视为问题：

¥The following patterns are not considered problems:

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

"never"​

颜色绝不能被命名。

¥Colors must never be named.

{
  "color-named": "never"
}

以下模式被视为问题：

¥The following patterns are considered problems:

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

以下模式不被视为问题：

¥The following patterns are not considered problems:

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

可选的辅助选项​

¥Optional secondary options

ignore​

{ "ignore": ["array", "of", "options"] }

"inside-function"​

忽略函数内部的颜色。

¥Ignore colors that are inside a function.

鉴于：

¥Given:

{
  "color-named": ["never", { "ignore": ["inside-function"] }]
}

以下模式不被视为问题：

¥The following patterns are not considered problems:

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

ignoreProperties​

{ "ignoreProperties": ["array", "of", "properties", "/regex/"] }

鉴于：

¥Given:

{
  "color-named": ["never", { "ignoreProperties": ["/^my-/", "composes"] }]
}

以下模式不被视为问题：

¥The following patterns are not considered problems:

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