LESS速查
注释
缓存式注释/*注释内容*/
非缓存式注释//注释内容
变量
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header { color: @light-blue; }
混合
1.混合类：
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
.bordered;
2.混合带参数：
.border-radius (@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}}
#header {
.border-radius(4px);
}
我们还可以像这样给参数设置默认值：
.border-radius (@radius: 5px) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
#header {
.border-radius;
}
模式匹配
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 函数输出颜色。
运算：
@test:800px;
body{
width:@test - 200; //运算会自动同步单位
}
嵌套规则
LESS 可以让我们以嵌套的方式编写层叠样式
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
&:hover { text-decoration: none }
}
}
注意 & 符号的使用 — 如果你想写串联选择器，而不是写后代选择器，就可以用到 & 了。这点对伪类尤其有用如 :hover 和 :focus。
例如：
.bordered {
&.float {
float: left;
}
.top {
margin: 5px;
}
}
会输出：
.bordered.float {
float: left;
}
.bordered .top {
margin: 5px;
}
@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;
避免编译
~"样式" 可用单引号或双引号
有时候我们需要输出一些不正确的 CSS 语法或者使用一些 LESS 不认识的专有语法。
要输出这样的值我们可以在字符串前加上一个 ~，例如：
.class {
filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}
这叫作“避免编译”，输出结果为：
.class {
filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}
作用域
LESS 中的作用域跟其他编程语言非常类似，首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止。
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
#footer {
color: @var; // red
}
!important关键字
调用时在混合后面加上!important关键字表示将混合带来的所有属性标记为!important：
.mixin (@a: 0) {
border: @a;
boxer: @a;
}
.unimportant {
.mixin(1);
}
.important {
.mixin(2) !important;
}
编译成：
.unimportant {
border: 1;
boxer: 1;
}
.important {
border: 2 !important;
boxer: 2 !important;
}
