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;

}