LESS 做为 CSS 的一种形式的扩展，它并没有阉割 CSS 的功能，而是在现有的 CSS 语法上，添加了很多额外的功能，所以学习 LESS 是一件轻而易举的事情，果断学习之！

变量

很容易理解：

@nice-blue: #5B83AD;
    @light-blue: @nice-blue + #111;

    #header { color: @light-blue; }

输出：

#header { color: #6c94be; }

甚至可以用变量名定义为变量：

@fnord: "I am fnord.";
    @var: 'fnord';
    content: @@var;

解析后：

content: "I am fnord.";

请注意 LESS 中的变量为完全的 ‘常量’，所以只能定义一次。

混合

在 LESS 中我们可以定义一些通用的属性集为一个 class，然后在另一个 class 中去调用这些属性，下面有这样一个 class：

.bordered {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
    }

那如果我们现在需要在其他 class 中引入那些通用的属性集，那么我们只需要在任何 class 中像下面这样调用就可以了：

#menu a {
    color: #111;
    .bordered;
    }
    .post a {
    color: red;
    .bordered;
    }

.bordered class 里面的属性样式都会在 #menu a 和 .post a 中体现出来：

#menu a {
    color: #111;
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
    }
    .post a {
    color: red;
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
    }

任何 CSS class, id 或者 元素 属性集都可以以同样的方式引入。

带参数混合

在 LESS 中，你还可以像函数一样定义一个带参数的属性集合：

.border-radius (@radius) {
    border-radius: @radius;
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
    }

然后在其他 class 中像这样调用它：

#header {
    .border-radius(4px);
    }
    .button {
    .border-radius(6px);
    }

我们还可以像这样给参数设置默认值：

.border-radius (@radius: 5px) {
    border-radius: @radius;
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
    }

所以现在如果我们像这样调用它的话：

#header {
    .border-radius;
    }

radius 的值就会是 5px。

你也可以定义不带参数属性集合，如果你想隐藏这个属性集合，不让它暴露到 CSS 中去，但是你还想在其他的属性集合中引用，你会发现这个方法非常的好用：

.wrap () {
    text-wrap: wrap;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    word-wrap: break-word;
    }

    pre { .wrap }

输出：

pre {
    text-wrap: wrap;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    word-wrap: break-word;
    }

@arguments 变量

@arguments包含了所有传递进来的参数。 如果你不想单独处理每一个参数的话就可以像这样写：

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
    box-shadow: @arguments;
    -moz-box-shadow: @arguments;
    -webkit-box-shadow: @arguments;
    }
    .box-shadow(2px, 5px);

将会输出：

  box-shadow: 2px 5px 1px #000;
    -moz-box-shadow: 2px 5px 1px #000;
    -webkit-box-shadow: 2px 5px 1px #000;

高级参数用法与 @rest 变量

如果需要在 mixin 中不限制参数的数量，可以在变量名后添加 ...，表示这里可以使用 N 个参数。

.mixin (...) {        // 匹配 0-N 个参数
    .mixin () {           // 不匹配任何参数
    .mixin (@a: 1) {      // 匹配 0-1 个参数
    .mixin (@a: 1, ...) { // 匹配 0-N 个参数
    .mixin (@a, ...) {    // 匹配 1-N 个参数

此外：

.mixin (@a, @rest...) {
    // @rest 表示 @a 之后的参数
    // @arguments 表示所有参数
    }

Pattern-matching and Guard expressions

LESS 提供了通过参数值控制 mixin 行为的功能，让我们先从最简单的例子开始：

.mixin (@s, @color) { ... }

    .class {
    .mixin(@switch, #888);
    }

如果要根据 @switch 的值控制 .mixin 行为，只需按照下面的方法定义 .mixin：

.mixin (dark, @color) {
    color: darken(@color, 10%);
    }
    .mixin (light, @color) {
    color: lighten(@color, 10%);
    }
    .mixin (@_, @color) {
    display: block;
    }

现在运行：

@switch: light;

    .class {
    .mixin(@switch, #888);
    }

将会得到以下 CSS：

.class {
    color: #a2a2a2;
    display: block;
    }

导入给 .mixin 的颜色将执行 lighten 函数，如果 @switch 的值是 dark，那么则会执行 darken 函数输出颜色。

以下是整个过程如何发生的：

• 第一条 mixin 没有匹配，因为不满足 dark 条件；
• 第二条 mixin 可以被匹配，因为它满足了 light 条件；
• 第三条 mixin 也可以被匹配，因为它接受任何参数。

只有满足匹配要求的 mixin 才可以被使用。变量可以使用任何值，而变量之外的参数只有它们的值完全相等时才可以匹配成功。

我们也可以根据参数的数量进行匹配，比如：

.mixin (@a) {
    color: @a;
    }
    .mixin (@a, @b) {
    color: fade(@a, @b);
    }

调用 .mixin 时，如果使用了一个参数，输出第一条 .mixin，使用了两个参数，则输出第二条。

Guards

与上面匹配值，或者参数数量的情况不同，Guards 被用来匹配表达式 (expressions)。如果你很熟悉编程函数的用法，相信你已经掌握它的用法了。

为了尽可能地符合 CSS 的语言结构，LESS 选择使用 guarded mixins （类似于 @media 的工作方式）执行条件判断，而不是加入 if/else 声明。

首先通过下面的例子开始介绍：

.mixin (@a) when (lightness(@a) >= 50%) {
    background-color: black;
    }
    .mixin (@a) when (lightness(@a) < 50%) {
    background-color: white;
    }
    .mixin (@a) {
    color: @a;
    }

要点在于关键词 when，它引入了一条 guard 条件 （这里只用到一个 guard）。现在如果运行下面的代码：

.class1 { .mixin(#ddd) }
    .class2 { .mixin(#555) }

将会得到以下输出结果：

.class1 {
    background-color: black;
    color: #ddd;
    }
    .class2 {
    background-color: white;
    color: #555;
    }

Guards 支持的运算符包括：> >= = =< <。说明一下，“true”关键字是唯一被判断为真的值，它使这两个mixin相等:

.truth (@a) when (@a) { ... }
    .truth (@a) when (@a = true) { ... }

其他不等于 true 的值是无效的：

.class {
    .truth(40); // 不会匹配上面的 mixin
    }

Guards 通过 ‘,’ 逗号表示分隔，如果 guards 的结果为 true，匹配成立：

.mixin (@a) when (@a > 10), (@a < -10) { ... }

注意：也可以比较参数，或者不设定参数：

@media: mobile;

    .mixin (@a) when (@media = mobile) { ... }
    .mixin (@a) when (@media = desktop) { ... }

    .max (@a, @b) when (@a > @b) { width: @a }
    .max (@a, @b) when (@a < @b) { width: @b }

如果需要根据值的类型 (value type) 匹配 mixin，可以使用 is* 函数：

.mixin (@a, @b: 0) when (isnumber(@b)) { ... }
    .mixin (@a, @b: black) when (iscolor(@b)) { ... }

几个检查基本类型的函数：

• iscolor
• isnumber
• isstring
• iskeyword
• isurl

如果需要检查一个值，准确的说是数字使用了哪个单位，可以使用下面三个函数：

• ispixel
• ispercentage
• isem

最后，你可以使用关键词 and 在 guard 中加入额外的条件：

.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }

或者，使用关键词 not 否定条件：

.mixin (@b) when not (@b > 0) { ... }

嵌套规则

LESS 可以让我们以 嵌套 的方式编写层叠样式。 让我们先看下下面这段 CSS：

#header { color: black; }
    #header .navigation {
    font-size: 12px;
    }
    #header .logo {
    width: 300px;
    }
    #header .logo:hover {
    text-decoration: none;
    }

在 LESS 中, 我们就可以这样写：

#header {
    color: black;

    .navigation {
    font-size: 12px;
    }
    .logo {
    width: 300px;
    &:hover { text-decoration: none }
    }
    }

或者这样写：

#header        { color: black;
    .navigation  { font-size: 12px }
    .logo        { width: 300px;
    &:hover    { text-decoration: none }
    }
    }

代码更简洁了，而且感觉跟 DOM 结构格式有点像。

注意 & 符号的使用 — 如果你想写串联选择器，而不是写后代选择器，就可以用到 & 了。这点对伪类尤其有用如 :hover 和 :focus。

例如：

.bordered {
    &.float {
    float: left;
    }
    .top {
    margin: 5px;
    }
    }

会输出：

.bordered.float {
    float: left;
    }
    .bordered .top {
    margin: 5px;
    }

嵌套 Media Queries

Media queries 允许像选择器那样进行嵌套。

.one {
    @media (width: 400px) {
    font-size: 1.2em;
    @media print and color {
    color: blue;
    }
    }
    }

输出：

@media (width: 400px) {
    .one {
    font-size: 1.2em;
    }
    }
    @media (width: 400px) and print and color {
    .one {
    color: blue;
    }
    }

& 的高级用法

嵌套的外层含有多个选择器的情况下，& 符号可以交替输出他们的顺序。

例如：

.child, .sibling {
    .parent & {
    color: black;
    }
    & + & {
    color: red;
    }
    }

输出：

.parent .child,
    .parent .sibling {
    color: black;
    }
    .child + .child,
    .child + .sibling,
    .sibling + .child,
    .sibling + .sibling {
    color: red;
    }

& 也可以用在 mixin 中表示嵌套这个 mixin 的父选择器。

运算

任何数字、颜色或者变量都可以参与运算，来看一组例子：

@base: 5%;
    @filler: @base * 2;
    @other: @base + @filler;

    color: #888 / 4;
    background-color: @base-color + #111;
    height: 100% / 2 + @filler;

LESS 的运算已经超出了我们的期望，它能够分辨出颜色和单位。如果像下面这样单位运算的话：

@var: (1px + 5);

LESS 会输出 6px。

括号也同样允许使用：

width: ((@var + 5) * 2);

并且可以在复合属性中进行运算：

border: (@width * 2) solid black;

函数

LESS 提供了多种函数用于控制颜色变化、处理字符串、算术运算等等。这些函数会在下面的函数列表部分详细介绍。

函数的用法非常简单，下面这个例子将介绍如何将 0.5 转换为 50%；颜色饱和度增加 5%；以及颜色亮度降低 25% 色相值增加 8 等用法：

@base: #f04615;
    @width: 0.5;

    .class {
    width: percentage(0.5); // returns `50%`
    color: saturate(@base, 5%);
    background-color: spin(lighten(@base, 25%), 8);
    }

命名空间

有时候，你可能为了更好组织 CSS 或者单纯是为了更好的封装，将一些变量或者混合模块打包起来，你可以像下面这样在 #bundle 中定义一些属性集之后可以重复使用：

#bundle {
    .button () {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover { background-color: white }
    }
    .tab { ... }
    .citation { ... }
    }

你只需要在 #header a 中像这样引入 .button：

#header a {
    color: orange;
    #bundle > .button;
    }

作用域

LESS 中的作用域跟其他编程语言非常类似，首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止。

@var: red;

    #page {
    @var: white;
    #header {
    color: @var; // white
    }
    }

    #footer {
    color: @var; // red
    }

注释

CSS 的注释格式在 LESS 中是依然保留的：

/* Hello, I'm a CSS-style comment */
    .class { color: black }

LESS 同样也支持双斜线的注释，但是编译成 CSS 的时候自动过滤掉：

// Hi, I'm a silent comment, I won't show up in your CSS
    .class { color: white }

Importing

你可以在 main 文件中通过下面的格式导入 .less 文件， .less 后缀可带可不带：

@import "lib.less";
    @import "lib";

如果你想导入一个 CSS 文件而且不想 LESS 对它进行处理，只需要使用 .css 后缀就可以：

@import "lib.css";

这样 LESS 就会跳过它不去处理它。

为了避免重复导入文件，使用 @import-once 限制文件只允许被导入一次。

@import-once "lib.less";
    @import-once "lib.less"; // will be ignored

LESS 1.4.0 版将默认执行 @import-once

字符串插值

变量可以用类似 ruby 和 php 的方式嵌入到字符串中，像 @{name} 这样的结构：

@base-url: "http://assets.fnord.com";
    background-image: url("@{base-url}/images/bg.png");

避免编译

有时候我们需要输出一些不正确的 CSS 语法或者使用一些 LESS 不认识的专有语法。

要输出这样的值我们可以在字符串前加上一个 ~，例如：

    .class {
    filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
    }

我们可以将要避免编译的值用 “ ” 包裹起来，输出结果为：

    .class {
    filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
    }

Selector Interpolation

如果需要在选择器中使用 LESS 变量，只需通过 @{selector} 插值语句导入变量，例如：

@name: blocked;
    .@{name} {
    color: black;
    }

输出：

.blocked {
    color: black;
    }

注意：(~"@{name}") 语句可以在 LESS 1.3.1 等之前版本中使用，但 1.4.0 版将不再支持这种用法。

JavaScript evaluation

JavaScript 表达式也可以在 .less 文件中使用，可以通过反引号的方式使用（但是不建议使用）：

@var: `"hello".toUpperCase() + '!'`;

输出：

@var: "HELLO!";

注意你也可以同时使用字符串插值和避免编译：

@str: "hello";
    @var: ~`"@{str}".toUpperCase() + '!'`;

输出：

@var: HELLO!;

它也可以访问 JavaScript 环境：

@height: `document.body.clientHeight`;

如果你想将一个 JavaScript 字符串解析成16进制的颜色值，你可以使用 color 函数：

@color: color(`window.colors.baseColor`);
    @darkcolor: darken(@color, 10%);

Index

escape(@string);                             // 通过 URL-encoding 编码字符串

unit(@dimension, [@unit: ""]);               // 移除或替换属性值的单位
color(@string);                              // 将字符串解析为颜色值

ceil(@number);                               // 向上取整
floor(@number);                              // 向下取整
percentage(@number);                         // 将浮点数转换为百分比，例如 0.5 -> 50%
round(number, [places: 0]);                  // 四舍五入取整

rgb(@r, @g, @b);                             // 转换为颜色值
rgba(@r, @g, @b, @a);                        // 转换为颜色值
argb(@color);                                // 创建 #AARRGGBB 格式的颜色值
hsl(@hue, @saturation, @lightness);          // 创建颜色值
hsla(@hue, @saturation, @lightness, @alpha); // 创建颜色值
hsv(@hue, @saturation, @value);              // 创建颜色值
hsva(@hue, @saturation, @value, @alpha);     // 创建颜色值

hue(@color);                                 // 从颜色值中提取 `hue` 值
saturation(@color);                          // 从颜色值中提取 `saturation` 值
lightness(@color);                           // 从颜色值中提取 'lightness' 值
red(@color);                                 // 从颜色值中提取 'red' 值
green(@color);                               // 从颜色值中提取 'green' 值
blue(@color);                                // 从颜色值中提取 'blue' 值
alpha(@color);                               // 从颜色值中提取 'alpha' 值
luma(@color);                                // 从颜色值中提取 'luma' 值

saturate(@color, 10%);                       // 饱和度增加 10%
desaturate(@color, 10%);                     // 饱和度降低 10%
lighten(@color, 10%);                        // 亮度增加 10%
darken(@color, 10%);                         // 亮度降低 10%
fadein(@color, 10%);                         // 透明度增加 10%
fadeout(@color, 10%);                        // 透明度降低 10%
fade(@color, 50%);                           // 设定透明度为 50%
spin(@color, 10);                            // 色相值增加 10
mix(@color1, @color2, [@weight: 50%]);       // 混合两种颜色
greyscale(@color);                           // 完全移除饱和度，输出灰色
contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]); 
                                             // 如果 @color1 的 luma 值 > 43% 输出 @darkcolor
                                             // 否则输出 @lightcolor

multiply(@color1, @color2);
screen(@color1, @color2);
overlay(@color1, @color2);
softlight(@color1, @color2);
hardlight(@color1, @color2);
difference(@color1, @color2);
exclusion(@color1, @color2);
average(@color1, @color2);
negation(@color1, @color2);

字符串函数 (String functions)

escape(@string)

将 =, :, #, ;, ( 与 ) 等字符通过 URL-encoding 编码输出。

参数:

• @string: 字符串 (A string to escape.)

返回值：字符串 (string)

例如：

escape('a=1')

输出：

a%3D1

综合类函数 (Misc functions)

color(@string)

解析颜色，将代表颜色的字符串转换为颜色值。

参数:

• @string: 字符串 (A string of the color.)

例如：

color("#aaa");

输出：

#aaa

unit(@dimension, [@unit: ""])

移除或替换属性值 (dimension) 的单位。（注：A dimension is a number immediately followed by a unit identifier.）

参数:

• @dimension: 数字，带或不带单位 (A number, with or without a dimension.)
• @unit: 可选：将要替换成的单位，如果省略则移除原单位

例如：

unit(5, px)

输出：

5px

例如：

unit(5em)

输出：

5

算数函数 (Math functions)

ceil(@number)

向上取整。

参数:

• @number: 浮点数 (A floating point number.)

返回值：整数 (integer)

例如：

ceil(2.4)

输出：

3

floor(@number)

向下取整。

参数:

• @number: 浮点数 (A floating point number.)

返回值：整数 (integer)

例如：

floor(2.6)

输出：

2

percentage(@number)

将浮点数 (A floating point number) 转换为百分比字符串 (percentage string)。

参数:

• @number: 浮点数 (A floating point number.)

返回值：字符串 (string)

例如：

percentage(0.5)

输出：

50%

round(number, [places: 0])

四舍五入取整。

参数:

• @number: 浮点数 (A floating point number.)
• @decimalPlaces: 可选：四舍五入取整的小数点位置，默认值 0。

返回值：数字 (number)

例如：

round(1.67)

输出：

2

例如：

round(1.67, 1)

输出：

1.7

颜色函数 (Color functions)

颜色解释 (Color definition)

rgb(@r, @g, @b)

通过十进制红色，绿色，蓝色三种值 (RGB) 创建不透明的颜色对象。在 HTML/CSS 中也会用文本颜色值 (literal color values) 定义颜色，例如 red -> #ff0000。

参数:

• @red: 整数 0-255 或百分比 0-100%
• @green: 整数 0-255 或百分比 0-100%
• @blue: 整数 0-255 或百分比 0-100%

返回值：颜色 (color)

例如：

rgb(90, 129, 32)

输出：

#5a8120

rgba(@r, @g, @b, @a)

通过十进制红色，绿色，蓝色，以及 alpha 四种值 (RGBA) 创建透明的颜色对象。

参数:

• @red: 整数 0-255 或百分比 0-100%
• @green: 整数 0-255 或百分比 0-100%
• @blue: 整数 0-255 或百分比 0-100%
• @alpha: 数字 0-1 或百分比 0-100%

返回值：颜色 (color)

例如：

rgba(90, 129, 32, 0.5)

输出：

rgba(90, 129, 32, 0.5)

argb(@color)

创建格式为 #AARRGGBB 的十六进制 (hex representation) 颜色 (注意不是 #RRGGBBAA ！)。

参数:

• @color: 颜色对象 (A color object.)

返回值：字符串 (string)

例如：

argb(rgba(90, 23, 148, 0.5));

输出：

#805a1794

hsl(@hue, @saturation, @lightness)

通过色相 (hue)，饱和度 (saturation)，亮度 (lightness) 三种值 (HSL) 创建不透明的颜色对象。

参数:

• @hue: 整数 0-360 表示度数。
• @saturation: 百分比 0-100% 或数字 0-1
• @lightness: 百分比 0-100% 或数字 0-1

返回值：颜色 (color)

例如：

hsl(90, 100%, 50%)

输出：

#80ff00

可以用来基于一种颜色创建另一种颜色, 例如:

@new: hsl(hue(@old), 45%, 90%);

@new 将使用 @old 的 色相值，以及它自己的饱和度与亮度。

hsla(@hue, @saturation, @lightness, @alpha)

通过色相 (hue)，饱和度 (saturation)，亮度 (lightness)，以及 alpha 四种值 (HSLA) 创建透明的颜色对象。

参数:

• @hue: 整数 0-360 表示度数
• @saturation: 百分比 0-100% 或数字 0-1
• @lightness: 百分比 0-100% 或数字 0-1
• @alpha: 百分比 0-100% 或数字 0-1

返回值：颜色 (color)

例如：

hsl(90, 100%, 50%, 0.5)

输出：

rgba(128, 255, 0, 0.5)

hsv(@hue, @saturation, @value)

通过色相 (hue)，饱和度 (saturation)，明度 (value) 三种值 (HSV) 创建不透明的颜色对象。注意与 HSL 不同。

参数:

• @hue: 整数 0-360 表示度数
• @saturation: 百分比 0-100% 或数字 0-1
• @value: 百分比 0-100% 或数字 0-1

返回值：颜色 (color)

例如：

hsv(90, 100%, 50%)

输出：

#408000

hsva(@hue, @saturation, @value, @alpha)

通过色相 (hue)，饱和度 (saturation)，明度 (value)，以及 alpha 四种值 (HSVA) 创建透明的颜色对象。注意与 HSLA 不同。

参数:

• @hue: 整数 0-360 表示度数
• @saturation: 百分比 0-100% 或数字 0-1
• @value: 百分比 0-100% 或数字 0-1
• @alpha: 百分比 0-100% 或数字 0-1

返回值：颜色 (color)

例如：

hsva(90, 100%, 50%, 0.5)

输出：

rgba(64, 128, 0, 0.5)

颜色通道信息 (Color channel information)

hue(@color)

从颜色对象中提取色相值 (hue channel)。

参数:

• @color: 颜色对象 (A color object.)

返回值：整数 0-360

例如：

hue(hsl(90, 100%, 50%))

输出：

90

saturation(@color)

从颜色对象中提取饱和度值 (saturation channel)。

参数:

• @color: 颜色对象 (A color object.)

返回值：百分比值 0-100

例如：

saturation(hsl(90, 100%, 50%))

输出：

100%

lightness(@color)

从颜色对象中提取亮度值 (lightness channel)。

参数:

• @color: 颜色对象 (A color object.)

返回值：百分比值 0-100

例如：

lightness(hsl(90, 100%, 50%))

输出：

50%

red(@color)

从颜色对象中提取红色值。

参数:

• @color: 颜色对象 (A color object.)

返回值：整数 0-255

例如：

red(rgb(10, 20, 30))

输出：

10

green(@color)

从颜色对象中提取绿色值。

参数:

• @color: 颜色对象 (A color object.)

返回值：整数 0-255

例如：

green(rgb(10, 20, 30))

输出：

20

blue(@color)

从颜色对象中提取蓝色值。

参数:

• @color: 颜色对象 (A color object.)

返回值：整数 0-255

例如：

blue(rgb(10, 20, 30))

输出：

30

alpha(@color)

从颜色对象中提取 alpha 值。

参数:

• @color: 颜色对象 (A color object.)

返回值：介于 0-1 之间 (float 0-1)

例如：

alpha(rgba(10, 20, 30, 0.5))

输出：

0.5

luma(@color)

计算颜色对象的 luma 值（亮度值：perceptual brightness）。Uses SMPTE C / Rec. 709 coefficients, as recommended in WCAG 2.0. 这个计算公式也用在 contrast() 函数中。

参数:

• @color: 颜色对象 (A color object.)

返回值：百分比 0-100%

例如：

luma(rgb(100, 200, 30))

输出：

65%

颜色值运算 (Color operations)

颜色值运算有几点注意事项：参数必须单位/格式相同；百分比将作为绝对值处理，比如 10% 增加 10%，结果是 20% 而不是 11%；参数值只能在限定的范围内；they do not wrap around (这一句不清楚意思)。返回值时，除了十六进制的颜色值 (hex versions) 外将对其他格式做简化处理。

saturate(@color, 10%)

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

参数:

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

返回值：颜色 (color)

例如：

saturate(hsl(90, 90%, 50%), 10%)

输出：

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

desaturate(@color, 10%)

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

参数:

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

返回值：颜色 (color)

例如：

desaturate(hsl(90, 90%, 50%), 10%)

输出：

#80e51a // hsl(90, 80%, 50%)

lighten(@color, 10%)

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

参数:

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

返回值：颜色 (color)

例如：

lighten(hsl(90, 90%, 50%), 10%)

输出：

#99f53d // hsl(90, 90%, 60%)

darken(@color, 10%)

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

参数:

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

返回值：颜色 (color)

例如：

darken(hsl(90, 90%, 50%), 10%)

输出：

#66c20a // hsl(90, 90%, 40%)

fadein(@color, 10%)

降低颜色的透明度（或增加不透明度），令其更不透明，对不透明的颜色无效。如果要增加颜色的透明度，使用 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(@color, 10%)

增加颜色的透明度（或降低不透明度），令其更透明，对不透明的颜色无效。如果要增加颜色的透明度，使用 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.6)

fade(@color, 50%)

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

参数:

• @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(@color, 10)

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

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

而应该用这种方法代替：

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

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

参数:

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

返回值：颜色 (color)

例如：

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

输出：

#f27f0d // hsl(30, 90%, 50%)
#f20d33 // hsl(350, 90%, 50%)

mix(@color1, @color2, [@weight: 50%])

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

参数:

• @color1: 颜色对象 (A color object.)
• @color1: 颜色对象 (A color object.)
• @weight: 可选项：平衡两种颜色的百分比, 默认 50%。 (Optional, a percentage balance point between the two colors, defaults to 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)

greyscale(@color)

完全移除颜色的饱和度，与 desaturate(@color, 100%) 函数效果相同。因为颜色的饱和度不受色相值影响，所以输出的颜色会稍显暗淡 (dull or muddy)；luma may provide a better result as it extracts perceptual rather than linear brightness, for example greyscale('#0000ff') will return the same value as greyscale('#00ff00'), though they appear quite different in brightness to the human eye.

参数:

• @color: 颜色对象 (A color object.)

返回值：颜色 (color)

例如：

greyscale(hsl(90, 90%, 50%))

输出：

#808080 // hsl(90, 0%, 50%)

contrast(@background, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%])

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

参数:

• @background: 需要对比的颜色对象 (A color object to compare against.)
• @darkcolor: 可选项 – 指定的黑色（默认 black）
• @lightcolor: 可选项 – 指定的白色（默认 white）
• @threshold: 可选项 – 百分比 0-100% 界定深色过渡到浅色的转变位置（默认 43%），这个数值决定了输出结果偏向于哪一方，比如判断 50% 的灰色背景应该显示白色还是黑色的文字。You would generally set this lower for ‘lighter’ palettes, higher for ‘darker’ ones.

返回值：颜色 (color)

例如：

contrast(#aaaaaa)
contrast(#222222, #101010)
contrast(#222222, #101010, #dddddd)
contrast(hsl(90, 100%, 50%),#000000,#ffffff,40%);
contrast(hsl(90, 100%, 50%),#000000,#ffffff,60%);

输出：

#000000 // black
#ffffff // white
#dddddd
#000000 // black
#ffffff // white

颜色混合 (Color blending)

颜色混合的方式与图像编辑器 Photoshop, Firework 或者 GIMP 的图层混合模式 (layer blending modes) 相似，因此制作 .psd 文件时处理颜色的方法可以同样用在 CSS 中。

multiply(@color1, @color2)

分别将两种颜色的红绿蓝 (RGB) 三种值做乘法运算，然后再除以 255，输出结果是更深的颜色。

参数:

• @color1: 颜色对象 (A color object to multiply against.)
• @color2: 颜色对象 (A color object to multiply against.)

返回值：颜色 (color)

例如：

multiply(#ff6600, #000000);

multiply(#ff6600, #333333);

multiply(#ff6600, #666666);

multiply(#ff6600, #999999);

multiply(#ff6600, #cccccc);

multiply(#ff6600, #ffffff);

multiply(#ff6600, #ff0000);

multiply(#ff6600, #00ff00);

multiply(#ff6600, #0000ff);

screen(@color1, @color2)

与 multiply() 函数效果相反，输出结果是更亮的颜色。

参数:

• @color1: 颜色对象 (A color object to screen against.)
• @color2: 颜色对象 (A color object to screen against.)

返回值：颜色 (color)

例如：

screen(#ff6600, #000000);

screen(#ff6600, #333333);

screen(#ff6600, #666666);

screen(#ff6600, #999999);

screen(#ff6600, #cccccc);

screen(#ff6600, #ffffff);

screen(#ff6600, #ff0000);

screen(#ff6600, #00ff00);

screen(#ff6600, #0000ff);

overlay(@color1, @color2)

结合 multiply() 与 screen() 两个函数的效果，令浅的颜色变得更浅，深的颜色变得更深。注意：输出结果由第一个颜色参数决定。

参数:

• @color1: 颜色对象 (A color object to overlay another. Also it is the determinant color to make the result lighter or darker.)
• @color2: 颜色对象 (A color object to be overlayed.)

返回值：颜色 (color)

例如：

overlay(#ff6600, #000000);

overlay(#ff6600, #333333);

overlay(#ff6600, #666666);

overlay(#ff6600, #999999);

overlay(#ff6600, #cccccc);

overlay(#ff6600, #ffffff);

overlay(#ff6600, #ff0000);

overlay(#ff6600, #00ff00);

overlay(#ff6600, #0000ff);

softlight(@color1, @color2)

与 overlay() 函数效果相似，只是当纯黑色或纯白色作为参数时输出结果不会是纯黑色或纯白色。

参数:

• @color1: 颜色对象 (A color object to soft light another.)
• @color2: 颜色对象 (A color object to be soft lighten.)

返回值：颜色 (color)

例如：

softlight(#ff6600, #000000);

softlight(#ff6600, #333333);

softlight(#ff6600, #666666);

softlight(#ff6600, #999999);

softlight(#ff6600, #cccccc);

softlight(#ff6600, #ffffff);

softlight(#ff6600, #ff0000);

softlight(#ff6600, #00ff00);

softlight(#ff6600, #0000ff);

hardlight(@color1, @color2)

与 overlay() 函数效果相似，不过由第二个颜色参数决定输出颜色的亮度或黑度，而不是第一个颜色参数决定。

参数:

• @color1: 颜色对象 (A color object to overlay another.)
• @color2: 颜色对象 (A color object to be overlayed. Also it is the determinant color to make the result lighter or darker.)

返回值：颜色 (color)

例如：

hardlight(#ff6600, #000000);

hardlight(#ff6600, #333333);

hardlight(#ff6600, #666666);

hardlight(#ff6600, #999999);

hardlight(#ff6600, #cccccc);

hardlight(#ff6600, #ffffff);

hardlight(#ff6600, #ff0000);

hardlight(#ff6600, #00ff00);

hardlight(#ff6600, #0000ff);

difference(@color1, @color2)

从第一个颜色值中减去第二个（分别计算 RGB 三种颜色值），输出结果是更深的颜色。

参数:

• @color1: 颜色对象 (A color object to act as the minuend.)
• @color2: 颜色对象 (A color object to act as the subtrahend.)

返回值：颜色 (color)

例如：

difference(#ff6600, #000000);

difference(#ff6600, #333333);

difference(#ff6600, #666666);

difference(#ff6600, #999999);

difference(#ff6600, #cccccc);

difference(#ff6600, #ffffff);

difference(#ff6600, #ff0000);

difference(#ff6600, #00ff00);

difference(#ff6600, #0000ff);

exclusion(@color1, @color2)

效果与 difference() 函数效果相似，只是输出结果差别更小 (lower contrast)。

参数:

• @color1: 颜色对象 (A color object to act as the minuend.)
• @color2: 颜色对象 (A color object to act as the subtrahend.)

返回值：颜色 (color)

例如：

exclusion(#ff6600, #000000);

exclusion(#ff6600, #333333);

exclusion(#ff6600, #666666);

exclusion(#ff6600, #999999);

exclusion(#ff6600, #cccccc);

exclusion(#ff6600, #ffffff);

exclusion(#ff6600, #ff0000);

exclusion(#ff6600, #00ff00);

exclusion(#ff6600, #0000ff);

average(@color1, @color2)

分别对 RGB 的三种颜色值取平均值，然后输出结果。

参数:

• @color1: 颜色对象 (A color object.)
• @color2: 颜色对象 (A color object.)

返回值：颜色 (color)

例如：

average(#ff6600, #000000);

average(#ff6600, #333333);

average(#ff6600, #666666);

average(#ff6600, #999999);

average(#ff6600, #cccccc);

average(#ff6600, #ffffff);

average(#ff6600, #ff0000);

average(#ff6600, #00ff00);

average(#ff6600, #0000ff);

negation(@color1, @color2)

与 difference() 函数效果相反，输出结果是更亮的颜色。请注意：效果相反不代表做加法运算。

参数:

• @color1: 颜色对象 (A color object to act as the minuend.)
• @color2: 颜色对象 (A color object to act as the subtrahend.)

返回值：颜色 (color)

例如：

negation(#ff6600, #000000);

negation(#ff6600, #333333);

negation(#ff6600, #666666);

negation(#ff6600, #999999);

negation(#ff6600, #cccccc);

negation(#ff6600, #ffffff);

negation(#ff6600, #ff0000);

negation(#ff6600, #00ff00);

negation(#ff6600, #0000ff);