less开发（二）--基本语法

（一）嵌套规则

　　【1】less可以让我们以嵌套的方式编写层叠样式，先看下面这段CSS；

.box-a .hd {
  height: 20px;
}
.box-a .bd .txt {
  color: #000;
}
.box-a .other {
  position: relative;
} 

在LESS中，可以用嵌套方式写以上代码：

.box-a{
    .hd{
        height:20px;
    }
    .bd{
        .txt{
            color:#000;
        }
    }
    .other{
        position:relative;
    }
}

代码变更简洁与直观，与DOM树结构很相似。

【2】 & 符号

　　如果在嵌套规则中，想写串联选择器，而不是写后代选择器，可以用 & 符号，如:hover 伪类写法
　　

.box-a{
    .hd{
        height:20px;
        a{
            &:hover{
                color:#000;
            }
        }
    }

}

编译后

.box-a .hd {
  height: 20px;
}
.box-a .hd a:hover {
  color: #000;
}

（二）变量

　　【1】定义

　　@名:值; （需要在末尾加上分号）
　　

@color:#f60;
p{
    background-color:@color;
}

编译后

p {
  background-color: #ff6600;
}

【2】字符串插入变量值

@url:'../images/';
p{
    background:url('@{url}sp.png');
} 

　　编译后：

p {
  background: url('../images/sp.png');
}

　　【3】变量之间赋值

@url:'../images/';
@pageurl:@url;

p{
    background-image:url('@{pageurl}xxxx.jpg');
}

　　编译后：

p {
  background-image: url('../images/xxxx.jpg');
}

　　【4】预解析

　　（1）Less的变量调用，不需要在变量声明后才可以使用；

　　（2）同一个变量定义多次，在当前作用域中最后一次定义的将被使用

p{
    background-image:url('@{url}xxxx.jpg');
}

@url:'../images/';
@url:'http://www.xx.com/';

　　编译后：

p {
  background-image: url('http://www.xx.com/xxxx.jpg');
}

（三）混合（Mixins）

　　【1】调用已有的class或id 属性集　　

#modA{color:#000;}
.fl{float:left;}

p{
    #modA;
    .fl;
}

　　编译后：

#modA {
  color: #000;
}
.fl {
  float: left;
}
p {
  color: #000;
  float: left;
}

　　【2】带参数（或者空参数）的混合，编译后不会暴露在css文件中

#modA(){color:#000;}
.fl(){float:left;}

p{
    #modA;
    .fl;
}

　　编译后（CSS文件没有混合模块的代码）：

p {
  color: #000;
  float: left;
}

　　【3】设置默认参数

.mixins(@w;@h:100px){
    width:@w;
    height:@h;
}
p{
    .mixins(50px);
}

　　编译后：

p {
  width: 50px;
  height: 100px;
}

　　【4】参数

　　（1）多个参数可以使用分号或者逗号分隔，推荐使用分号分隔，因为逗号有两重含义：它既可以表示混合的参数，也可以表示一个参数中一组值的分隔符。

　　（2）如果在混合的定义或者是调用中找到至少一个分号，就会假设参数是使用分号分隔的，所有的逗号都属于参数中的一组值的分隔符。

.mixins(@font;@h){
    font:@font;
    height:@h;
}
p{
    .mixins(12px 'Microsoft yahei',arial;50px);
}

　　编译后：

p {
  font: 12px 'Microsoft yahei', arial;
  height: 50px;
}

　　
　　（3）… 设置不限制参数的个数；@arguments 获取全部的参数值

.mixins(...){
    -webkit-transform:@arguments;
    -moz-transform:@arguments;
    -ms-transform:@arguments;
    -o-transform:@arguments;
    transform:@arguments;

}
p{
    .mixins(translate(-10px,-10px));
}

　　编译后：

p {
  -webkit-transform: translate(-10px, -10px);
  -moz-transform: translate(-10px, -10px);
  -ms-transform: translate(-10px, -10px);
  -o-transform: translate(-10px, -10px);
  transform: translate(-10px, -10px);
}

　　【5】同名混合不会覆盖，符合且都会调用

.mixins(){
    overflow:hidden;
}
.mixins(){
    font:0;
}
p{
    .mixins();
}

　　编译后：

p {
  overflow: hidden;
  font: 0;
}

　　【6】匹配

　　（1）根据参数数量匹配

.mixins(){
    overflow:hidden;
}
.mixins(@fz){
    font:@fz;
}
.mixins(@w;@h){
    width:@w;
    height:@h;
}
p{
    .mixins(10px);
}

　　编译后：

p {
  font: 10px;
}

　　（2）指定匹配

.mixins(baidu){
    overflow:hidden;
}
.mixins(winds){
    font-size:0;
}

p{
    .mixins(baidu);
}

　　编译后：

p {
  overflow: hidden;
}

　　【7】表达式匹配 Guards，支持的表达式匹配运算符包括：> >= = =< < （注意：相等是 = ）

　　（1）单个条件

.mixins(@type) when(@type=baidu){
    overflow:hidden;
}

.mixins(@type) when(@type=winds){
    font-size:0;
}

p{
    .mixins(baidu);
}

　　编译后：

p {
  overflow: hidden;
}

　　（2）多条件，用逗号隔开：符合其中之一即可匹配

.mixins(@type) when(@type=baidu),(@type=winds){
    overflow:hidden;
}

p{
    .mixins(baidu);
}

h1{
    .mixins(winds);
}

　　编译后：

p {
  overflow: hidden;
}
h1 {
  overflow: hidden;
}

　　（3）多条件，用 and 隔开：全部符合才匹配

.mixins(@type;@style) when(@type=baidu)and(@style=blue){
    overflow:hidden;
}

p{
    .mixins(baidu;blue);
}

h1{
    .mixins(baidu;pink);
}

　　编译后：

p {
  overflow: hidden;
}

（四）递归

　　可以在定义的混合模块自我调用（递归）

　　循环输出的例子

.loop(@n;@i:1) when(@i<=@n){
    .row-@{i}{
        background:url('xxx.jpg') 0 @i*10px no-repeat;
    }

    .loop(@n;(@i+1));
}

.bg{
    .loop(5);
}

　　编译后：

.bg .row-1 {
  background: url('xxx.jpg') 0 10px no-repeat;
}
.bg .row-2 {
  background: url('xxx.jpg') 0 20px no-repeat;
}
.bg .row-3 {
  background: url('xxx.jpg') 0 30px no-repeat;
}
.bg .row-4 {
  background: url('xxx.jpg') 0 40px no-repeat;
}
.bg .row-5 {
  background: url('xxx.jpg') 0 50px no-repeat;
}

（五）作用域

　　作用域跟其他编程语言类似，首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，逐层递增，直到找到为止，否则报错。

@color:#f60;

p{
    @color:#333;
    background-color:@color;
}

　　编译后：

p {
  background-color: #333333;
}

（六）命名空间

　　为了更好组织 CSS 或者单纯是为了更好的封装，可以添加命名空间

.index{
    .mixins(){
        font-size:0;
    }
}

p{
    .index > .mixins();
}

　　编译后：

p {
  font-size: 0;
}

（七）注释

　　 /编译后保留css原有注释/

　　// 同时支持双反斜杠，但编译后不会保留在css文件中

（八）导入（import）

　　其实就是把样式内嵌到指定的文件中，不会带来额外请求

　　（1）嵌入less文件

@import "layout.less";

　　（2）嵌入css文件

@import (inline) "base.css";

（八）避免编译

　　如果需要输出一些不正确的 CSS 语法或者使用一些 LESS 不认识的专有语法，编译为less文件过程中会出现错误，这时候可以用避免编译来处理。

　　要输出这样的值我们可以在字符串前加上一个 ~

　　看下出错的例子：

p{
    _top:expression(eval(document.documentElement.scrollTop));
} 

　　编译过程中报错

　　所以需要用到避免编译的语法

p{
    _top:~"expression(eval(document.documentElement.scrollTop))";
}

　　避免编译也支持字符串插入值

@opacity:50;
p{
    opacity:50/100;
    filter:~"alpha(opacity=@{opacity})";
}

　　编译后：

p {
  opacity: 0.5;
  filter: alpha(opacity=50);
}

　　总结：以上只是less知识中的冰山一角，更多请关注官网 http://www.lesscss.net