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;

}