less

**

less的注释：

**
如果注释在less文件中使用 / / 时，编译在css文件中这个注释不可以（不显示），是给开发者看的

如果在less文件中注释使用/ ** / 这个注释时，在编译完成的css文件中是显示的，给用户看到

**

less文件中的变量：

**
在多次使用一个值时，我们在进行修改时会比较方便

1、在less文件中可以定义变量，必须使用@变量名：属性值

例：
比如在一个CSS文件中，pink色使用的次数比较多 那么我们就可以进行定义变量
@color：pink
background：@color
这样书写就如同：
background：pink；

2、在less文件中，属性名也可以通过变量来进行使用
使用方法：
@h:heigth
在引用时，注意：@加大括号{}如下
@{h}：

**

less里的变量延迟加载：

**
在less文件中，作用域里的代码全部解析完才知道一个变量指的是什么，这个就是变量的延迟加载

less文件中的嵌套规则：
在less文件中，如果是父子关系的嵌套就直接在其内部写，如：
#wrap{
heigth：120px；
…
…
.inner {
heigth：50px；
…
}
}
如果不是父子关系，如鼠标经过 （：hover）inner盒子就写为：
.inner {
heigth:50px；
…
…
&:hover {
heigth:100px;
}
}

**

less中的混合：

**
在less文件中出现大量相同的代码，我们为了代码更加简洁，避免代码冗余，我们可以将相同代码写在一起，然后哪里需要就在哪里调用就可：

1、普通混合：
例:
.inner{
heigth：100px；
…
…
…
}
.inner2 {
heigth：100px； //这里的代码域上个相同
…
…
…
}

---

这时我们就可以将代码进行混合：
.all {
heigth:100px; //这里的代码与上面的相同
…
…
…
}
.inner {
.all;
}
.inner2 {
.all;
}
问题：
在less文件编译为css文件后，我们在less文件中写的all部分（混合部分），会出现在css文件中，由于我们在页面中没有all部分的样式，我们在css文件中就不需要，这样我们就会不使用这个普通混合

不带输出的混合：
我们在.all 的后面添加一个（）就可，我们在使用也带上（），这样我们在解析后在css文件中看不到我们在less文件中写的混合部分
.all（）{
heigth:100px;
…
…
}
.inner {
.all();
}

带参数带默认值的混合：
.all(@a,@b,@c){
heigth:@a;
…
}
.inner{
.all(100px,100px,pink);
}
如果我们在样式中不给值就会报错，

带默认值：
.all(@a:10px,@b:10px,@c:pink){
heigth:@a;
…
}
.inner{
.all(100px,100px,pink);// 或者.all(@a,@b,@c)这样就使用的是默认值，不会报错
}

匹配模式：
例子：
写一个我们自定义的三角形样式
代码如下
向定义一个总的less文件triangle.less
.sq() { //这里在括号内加入@_就可以不用引入这个
width: 0;
height: 0;
border: solid;
}

.sq(L,@a,@b) {
border-width: @a;
border-color: transparent @b transparent transparent;
}
.sq(R,@a,@b) {
border-width: @a;
border-color: transparent transparent transparent @b;
}
.sq(T,@a,@b) {
border-width: @a;
border-color: transparent transparent @b transparent;
}
.sq(B,@a,@b) {
border-width: @a;
border-color: @b transparent transparent transparent;
}

再在css的less文件中引入：
@import “./triangle.less”; //调用定义的总样式
#wrap {
.sq();
.sq(R,40px,red);
}

这样就可以自己选择三角形的样式了（方向，颜色，大小等）