第一次用less编写css样式，很不习惯，虽然感觉用起来很方便，但是感觉跟我以前的编写语法习惯混杂了，也许还需要一点时间才能才能搞懂两种方法异同，为了更清晰的认识less，所以在此记录一下一下less的语法。

变量

在less中，你可以像编程语言一样定义一个变量存储你将来可能要用到的值，语法如下：

@变量名字 : 存储的值 ;

如我现在有一个类需要给html中div设置文字颜色为红色，那么可以这样做，定义一个变量color1，并把他的值设置为red,如下：

@color1 : red ;

你像下面这样使用它就好了：

div {
color : @color1 ;
}

并且在less中，变量是惰性加载使用的，也就是说，你可以先使用它，而后在定义它也是正确的。如下：

div{
color : @color1 ;
}
@color1 : red ;

这样做并不会语法错误，并且上面的代码会被解析成如下的样式：

div{
color : red;
}

嵌套语法

我们用css在写后代选择器样式的时候，采用类似下面的语法：

.class1 .class2 .class3{
//样式省略
}

而采用less后，你可以像下面这样写：

.class1 {
  .class2{
    .class3{
//样式省略
    }
  }
  }
}

这样写感觉层次更清楚，后代关系更清晰！我想这样写，后期需要改的时候，更利于维护！

封装使用频率比较高的属性节，然后到需要的地方引用就可

比如在移动开发中经常使用的样式，不换行省略字样式,现在你可以用一个类封装起来，到需要用的地方引入进去。如下面的代码

封装一个类
._text-ellipsis{
   display : block;
   overflow : hidden;
   -o-text-overflow:ellipsis;
   text-overflow:ellipsis;
   white-space:nowrap;
}
在div中使用封装的样式: div{
._text-ellipsis;
}

上面的代码会被编译成：

div{
   display : block;
   overflow : hidden;
   -o-text-overflow:ellipsis;
   text-overflow:ellipsis;
   white-space:nowrap;
}

可以像定义函数一样定义一个属性节，可以动态传参数

我们在写盒子的时候，又是会根据美观需求会添加一下圆角样式，但圆角具体的圆角幅度却不尽相同，为此，所以我要分别写不同大小的样式。但是在less中你可以像下面这样写：

.border-radius(@radius){
   -webkit-border-radius:@radius;
   -moz-border-radius:@radius;
   -ms-border-radius:@radius;
   -o-border-radius:@radius;
   border-radius:@radius;
}

你现在类为div1中要用到幅度为4px的圆角样式，你可以像下面这样引用：

.div1{
.border-radius(4px); }

你现在又要为类为div2的元素用幅度为50%的圆角样式，你只要这样改一下就好了：

.div2{
.border-radius:(50%); }

上面的代码分别会被编译成下面的样式：

.div1{
   -webkit-border-radius:4px;
   -moz-border-radius:4px;
   -ms-border-radius:4px;
   -o-border-radius:4px;
   border-radius:4px;
}
.div2{
   -webkit-border-radius:50%;
   -moz-border-radius:50%;
   -ms-border-radius:50%;
   -o-border-radius:50%;
   border-radius:50%;
}

甚至你可以在定义的时候传入默认的值，那么将来你只要传入空括号，就可以已默认值为样式值了，如下：

.border-radius(@radius:6px){
   -webkit-border-radius:@radius;
   -moz-border-radius:@radius;
   -ms-border-radius:@radius;
   -o-border-radius:@radius;
   border-radius:@radius;
}
.div3 {
.border-radius(); }

这样代码会被编译成如下的样式了！

.div3{
   -webkit-border-radius:6px;
   -moz-border-radius:6px;
   -ms-border-radius:6px;
   -o-border-radius:6px;
   border-radius:6px;
}

注意：采用上面两点封装的样式，没有带参数的会被编程普通的类，而带参数的不会出现在编译后的css文件中。记住只要有没有括号就会编译成普通的类。而有括号的编译之后css文件中是没有的，如上面的._text-ellipsis会被编程普通的一个类，而.border-radius(@radius)则不会出现，区分这两个只要记住有无括号就可以了！

less变量可以进行加减乘除

因为是第一次使用，肯定有说的不对的地方，所以有些地方需要继续实践去摸索。总之，用less编写起来逻辑层次更清晰，代码量较小、复用率较高，并且利于统一管理，因为其中一些样式的值你已经用变量存储起来了，需要改的时候改一下变量，用到它的地方都会统一改掉了。但我现在想到的是在使用嵌套的时候，不要嵌套的太深，四层差不多就可以了！

总结如下特点

• 有动态更新概念，有变量、有“函数”！
• less是兼容css的，你可以完全照你css的写法写，完全没有问题。

2016 03 20 更新内容一

用less写样式确实很方便，我发现我的写的代码前后联系性更强了，比如一个项目中有几个页面，可能公用一个样式文件，如果我用纯css写的话，整个思维从从前往后一直写的，如果没有主动去提炼其中一些相似的代码的话，经常会忽略这个问题，这样很不利于代码复用的，但是用less就不同了，你后面写的页面，可能还要用前面的class，所有你可以回去写。这样思维逻辑性更紧密。这样有助于提高代码利用率！用一个图说明一下：（放大查看全图）

2016 03 31 更新内容二

在使用less编写css的过程中，发现写嵌套的后代选择器的时候，如果你内嵌的两个不同的选择器，但是样式属性节却是一样的时候，最终被编译成群组选择器，但这与我的需求是不一样的！如果改成不一样，就会把它编译成两个不同的选择器。不知这是编译器的问题，还是less的问题，故记录在此，示例见下图：（点击图片可放大查看）

持续更新中……………………