LESS 针对color颜色操作的函数列表及详解

文章2019-04-281,178 人已阅来源:网络

LESS 颜色操作函数备忘一下。

lighten(@color,10%)        //返回颜色比@color浅10%的颜色
darken(@color,10%)         //...深
saturate(@color,10%)       //...饱和比  深
desaturate(@color,10%)     //...饱和比  浅
fadein(@color,10%)         //...不透明10%
fadeout(@color,10%)        //...透明10%
fade(@color,50%)           //...透明度为50%
spin(@color,10)            // ...颜色比@color大10的色调
spin(@color,-10)           // ...颜色比@color小10的色调
mix(@color1,@color2)       //返回@color1与@color2的混合值

Color Operation Functions (颜色操作函数)

颜色值运算有几点注意事项:参数必须单位/格式相同;百分比将作为绝对值处理,比如 10% 增加 10%,结果是 20% 而不是 11%;参数值只能在限定的范围内;they do not wrap around (这一句不清楚意思,可能是指参数值不会在超过范围后自动从另一侧“穿越”回去。)。返回值时,除了十六进制的颜色值 (hex versions) 外将对其他格式做简化处理。

saturate

增加一定数值的颜色饱和度。

参数:

  • @color: 颜色对象(A color object)
  • @amount: 百分比 0-100%

返回: color

示例: saturate(hsl(90, 80%, 50%), 20%)

输出: #80ff00 // hsl(90, 100%, 50%)

LESS 针对color颜色操作的函数列表及详解LESS 针对color颜色操作的函数列表及详解

desaturate

降低一定数值的颜色饱和度。

参数:

  • color: 颜色对象.
  • amount: 一个百分比 0-100%.

返回: color

示例: desaturate(hsl(90, 80%, 50%), 20%)

输出: #80cc33 // hsl(90, 60%, 50%)

LESS 针对color颜色操作的函数列表及详解LESS 针对color颜色操作的函数列表及详解

lighten

增加一定数值的颜色亮度。

参数:

  • color: 颜色对象.
  • amount: 一个百分比 0-100%.

返回: color

示例: lighten(hsl(90, 80%, 50%), 20%)

输出: #b3f075 // hsl(90, 80%, 70%)

LESS 针对color颜色操作的函数列表及详解LESS 针对color颜色操作的函数列表及详解

darken

降低一定数值的颜色亮度。

参数:

  • color: 颜色对象.
  • amount: 一个百分比 0-100%.

返回: color

示例: darken(hsl(90, 80%, 50%), 20%)

输出: #4d8a0f // hsl(90, 80%, 30%)

LESS 针对color颜色操作的函数列表及详解LESS 针对color颜色操作的函数列表及详解

fadein

降低颜色的透明度(或增加不透明度),令其更不透明。

对不透明的颜色无效。如果要增加颜色的透明度,使用 fadeout() 函数。

参数:

  • color: 颜色对象(A color object)
  • amount: 百分比 0-100%

返回: color

示例: fadein(hsla(90, 90%, 50%, 0.5), 10%)

输出: rgba(128, 242, 13, 0.6) // hsla(90, 90%, 50%, 0.6)

fadeout

增加颜色的透明度(或降低不透明度),令其更透明。对不透明的颜色无效。如果要增加颜色的透明度,使用fadein() 函数。

参数:

  • color: 颜色对象(A color object)
  • amount: 百分比 0-100%

返回: color

示例: fadeout(hsla(90, 90%, 50%, 0.5), 10%)

输出: rgba(128, 242, 13, 0.4) // hsla(90, 90%, 50%, 0.4)

fade

给颜色(包括不透明的颜色)设定一定数值的透明度。

参数:

  • color: 颜色对象(A color object)
  • amount: 百分比 0-100%

返回: color

示例: fade(hsl(90, 90%, 50%), 10%)

输出: rgba(128, 242, 13, 0.1) //hsla(90, 90%, 50%, 0.1)

spin

任意方向旋转颜色的色相角度 (hue angle)。

旋转范围 0-360,超过一周后将从起点开始继续旋转(+-控制方向),比如旋转360度与720度是相同的结果。需要注意的是,颜色值会通过RGB格式转换,这个过程不能保留灰色的色相值(灰色没有饱和度,色相值也就没有意义了),因此要确定使用函数的方法能够保留颜色的色相值,例如不要这样使用函数:

@c: saturate(spin(#aaaaaa, 10), 10%);

而应该用这种方法代替:

@c: spin(saturate(#aaaaaa, 10%), 10);

因为颜色值永远输出为 RGB 格式,因此 spin() 函数对灰色无效。

参数:

  • color: 颜色对象.
  • angle: 任意数字表示角度 (+ 或 – 表示方向)

返回: color

示例:

spin(hsl(10, 90%, 50%), 30)
spin(hsl(10, 90%, 50%), -30)

输出:

#f2a60d // hsl(40, 90%, 50%)
#f20d59 // hsl(340, 90%, 50%)

LESS 针对color颜色操作的函数列表及详解LESS 针对color颜色操作的函数列表及详解

LESS 针对color颜色操作的函数列表及详解LESS 针对color颜色操作的函数列表及详解

mix

根据比例混合两种颜色,包括计算不透明度。

参数:

  • color1: 一个颜色对象.
  • color2: 一个颜色对象.
  • weight: 可选项:平衡两种颜色的百分比, 默认 50%。

返回: color

示例:

mix(#ff0000, #0000ff, 50%)
mix(rgba(100,0,0,1.0), rgba(0,100,0,0.5), 50%)

输出:

#800080
rgba(75, 25, 0, 0.75)

LESS 针对color颜色操作的函数列表及详解 + LESS 针对color颜色操作的函数列表及详解LESS 针对color颜色操作的函数列表及详解

greyscale

完全移除颜色的饱和度,与 desaturate(@color, 100%) 函数效果相同。

因为颜色的饱和度不受色相值影响,所以输出的颜色会稍显暗淡 (dull or muddy);如果使用luma值可能会有更好的结果,因为它提取的是百分比亮度,而不是线性亮度。比如greyscale('#0000ff')greyscale('#00ff00')会得出相同的结果,尽管对人眼来说,它们的亮度是不一样的。

参数: color: 一个颜色对象。

返回: color

示例: greyscale(hsl(90, 90%, 50%))

输出: #808080 // hsl(90, 0%, 50%)

LESS 针对color颜色操作的函数列表及详解LESS 针对color颜色操作的函数列表及详解

注意:即便它们的亮度值(lightness value)一样,但是生成的灰色看起来比原来的绿色更暗些。

luma相比较(因为luma返回一个单独的值,而不是颜色,所以它们的用法不一样):

@c: luma(hsl(90, 90%, 50%));
color: rgb(@c, @c, @c);

输出: #cacaca

LESS 针对color颜色操作的函数列表及详解LESS 针对color颜色操作的函数列表及详解

实际上灰色的值跟高些,但是灰色的亮度值跟绿色的看起来大致上相同。

contrast

选择两种颜色相比较,得出哪种颜色的对比度最大就倾向于对比度最大的颜色。

这个函数对比 @background 的 luma 值与 @threshold 参数的大小,如果大于输出 @darkcolor, 小于则输出 @lightcolor,便于选择相对于背景更容易阅读的颜色,同时提高了使用颜色的灵活性,与 Compass 的 contrast() 函数 工作方式相同。根据 WCAG 2.0 应该对比颜色的 luma 值,而不是亮度值 (lightness)。

@light@dark 两个参数可以调换顺序。因为contrast()函数会自动计算它们的luma值和自动分配@light@dark,这样你就不用通过颠倒两个参数的顺序才能选到最小对比度颜色(the least contrasting color)。

参数:

  • @color: 需要对比的颜色对象 (A color object to compare against.)
  • @dark: 可选项 – 指定的黑色(默认 black)
  • @light: 可选项 – 指定的白色(默认 white)
  • @threshold: 可选项 – 百分比 0-100% 界定深色过渡到浅色的转变位置(默认 43%),这个数值决定了输出结果偏向于哪一方,比如判断 50% 的灰色背景应该显示白色还是黑色的文字。一般来说,如果本色方案偏浅,则应该设低一点,否则设高一点。

返回: color

示例:

p {
    a: contrast(#bbbbbb);
    b: contrast(#222222, #101010);
    c: contrast(#222222, #101010, #dddddd);
    d: contrast(hsl(90, 100%, 50%), #000000, #ffffff, 30%);
    e: contrast(hsl(90, 100%, 50%), #000000, #ffffff, 80%);
}

输出:

p {
    a: #000000 // 黑色
    b: #ffffff // 白色
    c: #dddddd
    d: #000000 // 黑色
    e: #ffffff // 白色
}

这些例子是利用计算颜色的值作为背景色和前景色。正如你所见,即便可能使用阈值允许得出更低对比度的颜色,但是不可能白衬白结束,也不可能黑衬黑结束。如最后一个例子:

LESS 针对color颜色操作的函数列表及详解LESS 针对color颜色操作的函数列表及详解LESS 针对color颜色操作的函数列表及详解LESS 针对color颜色操作的函数列表及详解LESS 针对color颜色操作的函数列表及详解