网页客户端
1.建立styles.less 文件(less样式文件写在此文件中)
2.下载less.js文件
3.导入方式：
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script type="text/javascript" src="less.js"></script>
TIP：
1.确保包涵 .less 样式表在 less.js 脚本 before
2.当你引入多个 .less 样式表时，它们都是独立编译的。所以，在每个文件中定义的变量、混合、命名空间都不会被其它的文件共享。
下列所有代码在styles.less中完成
变量
1.例子:
@color:red;
@size:20px;
div{
color:@color;
Font-size:@size;
}
2.如果对同一个变量定义两次的话，在当前作用域中最后一次定义的将被使用
@color:red;
@size:20px;
div{
.class1{
color:@color;
@color:blue;//class 作用域
}
color:@color;
Font-size:@size;
}
这里会生成两个样式
div{color:red;font-size:20px}
div class1{color:blue}
变量是“按需加载”（lazy loaded）的，因此不必强制在使用之前声明
混合
1.在 LESS 中，你还可以像函数一样定义一个带参数的属性集合
.class1(@size){
Font-size:@size;
}
在其他地方调用class1
#div2{
.class1(34px);
}
2.设置默认值
.class1(@size:12px){
Font-size:@size;
}
调用为 .class1 默认为12px;
3.你想隐藏这个属性集合，不让它暴露到 CSS 中去，但是你还想在其他的属性集合中引用
设置不带参数的集合
.class1(){
}
调用 .class1
4.多个参数可以使用分号或者逗号分隔，推荐使用分号分隔，因为逗号有两重含义：它既可以表示混合的参数，也可以表示一个参数中一组值的分隔符。
5.@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;
6.高级参数用法与 @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 表示所有参数
}
7.!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;
}
8.匹配模式
根据第一个参数是a或b来选择要使用的样式
.class3(a,@color){
color:@color;
font-size:12px;
}
.class3(b,@color){
color:@color;
font-size:30px;
}
#p2{
.class3(a,green);
}
#p3{
.class3(b,red);
}
9.Guards(支持的运算符包括：> >= = =< <)
.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }
.mixin (@b) when not (@b > 0) { ... }
几个检查基本类型的函数：
iscolor
isnumber
isstring
iskeyword
Isurl
嵌套规则
注意 & 符号的使用 — 如果你想写串联选择器，而不是写后代选择器，就可以用到 & 了。
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
&:hover { text-decoration: none }
}
}
编译为：
#header { color: black; }
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
#header .logo:hover {
text-decoration: none;
}
运算(加减乘除)
@var: (1px + 5) //Less 会自动辨认单位
命名空间
有时候，你可能为了更好组织 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;
}
导入(Import)
在LESS中，你既可以导入CSS文件，也可以导入LESS文件。但只有导入的LESS文件才会被处理（编译），导入的CSS文件会保持原样。如果你希望导入一个CSS文件，保留.css后缀即可：
@import "lib.css";
导入less
@import "library.less" screen and (max-width: 400px); // 通过media query指定的import
@import "library.less"; // 无media query的import
字符串插值
@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");
避免编译
.class {
filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}
选择器插值
@name: blocked;
.@{name} {
color: black;
}