less基础语法

less简介

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。

---

编译工具

Node、浏览器和 Rhino 平台都可以。本人使用的则是国人的koala。

---

less中的注释

分为两种：//和/**/
1.//:此种编译后不会出现在css文件中，不编译

2./**/:这种编译后仍会保留，编译

---

变量

声明格式：@变量名:值;

---

混合

即可看做将打包好的设置进行复用，例如：

//less 混合

.border1{
width:100px;
height: 100px;
border: 2px green solid;
}

//带参混合（参数可多个）

.border2(@border_width:1px){//默认为1px，可以不设
width:100px;
height: 100px;
border: @border_width green solid;
}

.box2{
.border2(5px);
}

匹配模式

在混合的基础上可选择同一类的不同设置，下面参考写三角的例子（对于写三角不熟悉的朋友可参考：http://www.tuicool.com/articles/3eaINn）

.triangle{right,@w:5px,@c:#ccc){border-width:@w;border-color:transparent transparent transparent @c;border-style:dashed dashed dashed solid;}

.triangle(@,@w:5px,@c:#ccc){width:0;height:0;overflow:hidden;}//这一行可不设置，@_这个参数表示，使用这个模式的都将默认包含这段代码

.sanjiao{.triangle(right,100px);}//调用

匹配模式-定位，其中参数固定

.pos(r){position:relative;}

.pos(a){position:absolute;}

.pos(f){position:fixed;}

.usepos{width:200px;height:200px;background-color:black;.pos(r);}

---

运算

less支持加减乘除运算，常用于对长度的设置，也支持颜色的运算

---

嵌套规则

就是对嵌套的标签，可以嵌套的设置样式，比如：
html中的

<ul class="list"><li>first<a>2017-02-21</a></li></ul>

则less中就可以用这种格式去设置样式了

.list{…;li{…}a{…}}

另外像：hover这类选择器，可以这么用 符号&代表它的上一层选择器

.list{…;li{…}a{…;&:hover{…}}}

---

避免编译

处理当css中有一些less不认识的语法，或错误的css

格式：~’your code’

例如css3中有calc(),这个less是不认识的，所以可以如：width:~’calc(300px-100px)’;那么在css中就会师这样的width:calc(300px-100px);即避免编译