function-color-relative.md

Pattern: Missing use of scale-color

Issue: -

Description

Encourage the use of the scale-color over:

• darken
• desaturate
• fade-in
• fade-out
• lighten
• opacify
• saturate
• transparentize

p {
   color: saturate(blue, 20%);
  /**     ↑      ↑
   * This function should be scalar-color
   */
}

Examples

true

The following patterns are considered violations:

p {
   color: saturate(blue, 20%);
}

p {
   color: desaturate(blue, 20%);
}

p {
   color: darken(blue, .2);
}

p {
   color: lighten(blue, .2);
}

p {
   color: opacify(blue, .2);
}

p {
   color: fade-in(blue, .2);
}

p {
   color: transparentize(blue, .2);
}

p {
   color: fade-out(blue, .2);
}

The following patterns are not considered violations:

 p {
   color: scale-color(blue, $alpha: -40%);
 }

Further Reading

• stylelint - function-color-relative