less应用

什么是less以及应用的好处：

(1) Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性.

(2)定义变量，直接调用，不用重复造轮子.

1.less定义一个变量:

@baseColor:red; Body{background-color:@baseColor};

这个变量在同一个less文件中全局都可以使用，在使用之前，必选先定义一个变量。

2.less 定义一个函数:(注意参数一定要用@开头，否则报错)

.font_size(@font_size){

font-size: @font_size/30 ;

}

在需要调用的地方直接调用 .font_size(120rem); 这种是必须传值的，还有一种是有默认值的eg: .font_size(@font_size:20px),如果不传值,默认值为20px.

函数定义一定要记得在函数前加'.', 函数体内定义的变量作用域也只是函数体内，

@comment_color:#00ff00;

#test{

@comment_color:red;  

.font_size(120rem);

background: white;

color: @comment_color;

}

border所设置的颜色为行数体内的颜色，如果函数体内没有颜色，就会到体外去找直到找到为止，找不到就会报错。 3.条件判断

可以在类函数定义时候使用条件判断

.border(@a) 

when (@a>10),(@a<3){

border:@a solid blue;

}

.con1{.border(5px)}

这里的条件是大于10或者小于3，所以调用不成立

.border(@a) 

when (@a>10) and (@a<15){

border:@a solid blue;

}

.con1{.border(12px)}

这里的条件是大于10并且小于15 ，调用成立，条件语句中那个px可以加也可以不加，判断都通过 还可以使用内置函数unit来增加或者取出单位

.border(@a) { border:unit(@a,px) solid red; }

.con2{.border(5)} 输出 .con2{border:5px solid red;},如果写成unit(5px) 则去掉单位输出5

4 & 代替父级元素：

<div class="test1">
    <div class="test2">
        <p class="test2_title">test2_title</p>
    </div>
    <div class="test3">
        <p class="test3_title">test3_title</p>
    </div>
</div>

.test1{
  height: 120px;
  & .test2{
    font-size: 4rem;
    color: black;
  }
  & .test3{
    font-size: 6rem;
    color: yellow;
  }
}

还有很多可以参考less中文网：http://less.bootcss.com/features/#features-overview-feature