less的使用方法

LESS学习

1.变量

我们可以把一个css样式的值赋给一个参数，然后再设置样式的时候只需要设置这个参数名，如果要修改，就改参数的值就可以了。
demo.html

我是标题1

我是标题2

我是标题3

styles.less

@light_green: #009933;
h1 {
color: @light_green;
}

h2 {
background-color: @light_green;
}

2.Mixin

Mixin可以让类实现继承，而且允许传入参数

.font_class(@font-size:14px){
font-size: @font-size;
color:@light_green
}
#h2{
.font_class
}
h3{
.font_class(20px)
}
这里定义一个font_class类，可以传入参数font-size，参数的默认值是14px。

3.嵌套

经常会用到#name1 .class1这样的方式来选择id=name1里面的所有的含有类class1的标签。
在less中，可以用嵌套：
html

hello h3

hell h4

styles.less

@light_green: #009933;
@dark_green: #009999;
#name1 {
.class1 {
color: @light_green;
&:hover {
color: @dark_green
}
}
.class2 {
color: @dark_green;
}

}

4.函数运算

在less中可以实现加减乘除的运算

@base_font_size: 10px;
h1 {
font-size: @base_font_size;
}

h2 {
font-size: @base_font_size*2;
}

h3 {
font-size: @base_font_size+4;
}

5.转换成CSS文件

在命令行中执行

lessc styles.less
就可以把less文件转换成css文件