less的使用

变量、嵌套、Mixin混合，示例：

@ly_width:100px;
@ly_height:200px;
@ly_color:green;
.border {
    .two {
       border:1px solid red;
    }  
}
.one {
    width:@ly_width;
    height:@ly_height;
    background-color:@ly_color;
    .border;
}

分离规则集合，也可以使用它作为一个mixin参数

// 声明 detached 规则集合
@detached-ruleset: { background: red; };

// 使用 detached 规则集合
.top {
    @detached-ruleset(); //圆括号是必须的
}

带参数的混合。引用mixin时可以通过参数名称而不是参数的位置来为mixin提供参数值。任何参数都已通过它的名称来引用，这样就不必按照任意特定的顺序来使用参数：：

@ly_width:100px;
@ly_height:200px;
@ly_color:green;
.mixin(@color: black; @border_width:3px;) {
    border:@border_width solid red;
    color:@color;
}
.one {
    width:@ly_width;
    height:@ly_height;
    background-color:@ly_color;
    .mixin(#efca44; @border_width:5px);
}

@arguments变量

.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
  -webkit-box-shadow: @arguments;
     -moz-box-shadow: @arguments;
          box-shadow: @arguments;
}
.big-block {
  .box-shadow(2px; 5px);
}
编译后，为：
.big-block {
  -webkit-box-shadow: 2px 5px 1px #000;
     -moz-box-shadow: 2px 5px 1px #000;
          box-shadow: 2px 5px 1px #000;
}

命名空间，同样 > 是可选的，这种用法的效果相当于我们熟知的命名空间，你可以把混合集放到一个id选择器里面，这样可以确保它（这个混合集）不会跟其他的库冲突。

#outer {
  .inner {
    color: red;
  }
}

.c {
  #outer > .inner;
}

Mixins as Functions(作为函数使用的混合)

.average(@x, @y){
    @average:((@x + @y)/2)
}
div{
    .average(16px, 50px);
    padding: @average;
}
结果：
.div{
    padding: 33px;
}

less循环

//定义
.intro-loop(@n, @i:1) when (@i <= @n) {
    .intro-@{i} {
        img {
            background-image: url("../images/intro-@{i}.jpg");
        }
    }
    .intro-loop(@n, (@i + 1));
}
//调用
.introduction {
    .intro-loop(4);
}

//下面是less官方文档给的循环实例，其实实际上这就是递归调用
.loop(@counter) when (@counter > 0) {
    .loop((@counter - 1));
    width: (10px + @counter);
}

使用

@keyframes moveTable {
  from {
    transform: translateX(300%);
  }
  to {
    transform: translateX(0);
  }
}

.intro-loop(@n, @i:1) when (@i <= @n) {
  &:nth-child(@{i}){
    animation: moveTable ( .15s * @i ) ease-in-out;
  }
  .intro-loop(@n, (@i + 1));
}