阅读数:93 评论数:0

less作为css的一种形式的扩展，它并没有阉割CSS的功能，而是在现有的CSS语法 上，添加了很多额外的功能。

变量

在less中利用＠符号进行变量的定义

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header { color: @light-blue; }

混合

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

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

在任何class中像下面这样调用就可以

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

带参数混合

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

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

模式匹配和导引表达式

模式匹配是根据 值和参数匹配。

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

导引表达式比较像函数式编程，为了尽可能的保留css的可声明性，Less通过导引而非if/else语句 实现条件判断 ，因为前者已在@media query特性中被定义 。

1、when 关键字用来定义 一个导引 序列 。

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

2、导引 中可用全部比较运算符，除去关键字true以外的值都被视为假。

3、导引可以无参数，也可以对参数进行比较运算。

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

4、如果想基于值的类型进行匹配，可以使用is*函数 。

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

常见的检测函数：

（1）iscolor

（2） isnumber

（3）isstring

（4）iskeyword

（5）isurl

（6）ispixel

（7）ispercentage

（8）isem

5. 导引 中and 实现与，or实现或。

嵌套规则

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

如果你想写串联选择器，而不是后代选择器，就可以使用＆，这点对伪类尤其用用。

运算

任何数字、颜色或者变量都可以参数运算。

命令空间

有时候 ，为了更好组织css或者单纯是为了更好的土封装，将一些变量或者混合模块放在一起，

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

后面可以这样使用

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

字符串插件

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