颜色

2018-02-24 15:11 更新

颜色在 CSS 中占有重要地位。当涉及到操纵色彩时,Sass 通过提供少数的函数功能,最终成为了极具价值的助手。

颜色格式

为了尽可能简单地使用颜色,我建议颜色格式要按照以下顺序排列:

  1. CSS 颜色关键字;
  2. HSL 值;
  3. RGB 值;
  4. 十六进制。小写并尽可能简写。

对于初学者来说,颜色关键字往往比较通俗易懂。HSL 表 示方式不仅仅是人类大脑最易于接受的,它也可以让样式表作者轻松地调整色调、饱和度和亮度来修改颜色。如果一个颜色偏蓝、偏绿或者偏红,那么使用RGB 更容易表示出来,但是却不容易表示三者的混合色。最后,十六进制是人类大脑理解的极限了。

// Yep
.foo {
  color: red;
}

// Nope
.foo {
  color: #FF0000;
}

使用 HSL 值或者 RGB 值,通常在逗号 (,)后面追加一个空格,而不在前后括号 (()) 和值之间添加空格。

// Yep
.foo {
  color: rgba(0, 0, 0, 0.1);
  background: hsl(300, 100%, 100%);
}

// Nope
.foo {
  color: rgba(0,0,0,0.1);
  background: hsl( 300, 100%, 100% );
}

颜色和变量

当一个颜色被多次调用时,最好用一个有意义的变量名来保存它。

$sass-pink: #c69;

现在,你就可以在任何需要的地方随意使用这个变量了。不过,如果你是在一个主题中使用,我不建议固定的使用这个变量。相反,可以使用另一个标识方式的变量来保存它。

$main-theme-color: $sass-pink;

这样做可以防止一个主题变化而出现此类结果 $sass-pink: blue

变亮和变暗颜色

lighten 和 darken 函数都是通过增加或者减小HSL中颜色的亮度来实现调节的。基本上,它们就是 adjust-color 函数添加了 $lightness 参数的别名。

问题是,这些函数经常并不能实现预期的结果。另一方面,通过混合白色 或 黑色实现变量或变暗的 mix 函数,是一个不错的方法。

和上述两个函数相比,使用 mix 的好处是,当你降低颜色的比例时,它会渐进的接近黑色(或者白色),而 darken 和 lighten 立即变换颜色到黑色或白色。

有关 lighten/darken 和 mix 之间差异的示例来源于 KatieK

如果你不想每次都写 mix 函数,你可以创建两个易用的 tint 和 shade (Compass的一部分)来处理相同的事:

/// Slightly lighten a color
/// @access public
/// @param {Color} $color - color to tint
/// @param {Number} $percentage - percentage of `$color` in returned color
/// @return {Color}
@function tint($color, $percentage) {
  @return mix(white, $color, $percentage);
}

/// Slightly darken a color
/// @access public
/// @param {Color} $color - color to shade
/// @param {Number} $percentage - percentage of `$color` in returned color
/// @return {Color}
@function shade($color, $percentage) {
  @return mix(black, $color, $percentage);
}

scale-color 函数的设计初衷是为了更流畅地调试属性——以实际的高低为调试基础。它如同mix一样好用,并且提供了更清晰地调用约定。比例因子并不完全相同。

扩展阅读

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号