1、首先,安装node.js.、
Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。
1)安装Nodejs
安装完毕之后,要测试是否安装ok?
node -v 或者 npm -v (来安装一些工具)
2)npm install less -g (global)
注意安装完毕之后,会在cmd窗口中可以使用lessc
2、less的语法
2.1变量
例如:@color:red
div{
color:@color
}
运行结果如下:
div {
color: red;
}
2.2混入
例如:.temp{
border-top: 1px solid #999999;
border-bottom: 1px solid #333333;
}
#header{
background: greenyellow;
.temp
}
运行结果如下:
.temp {
border-top: 1px solid #999999;
border-bottom: 1px solid #333333;
}
#header {
background: greenyellow;
border-top: 1px solid #999999;
border-bottom: 1px solid #333333;
}
2.3参数
.border-radius(@radius){
border-radius:@radius;
-moz-border-radius:@radius;
}
div{
.border-radius(4px)
}
运行结果如下:
div {
border-radius: 4px;
-moz-border-radius: 4px;
}
2.4嵌套
#footer {
color: red;
>ul{
font-size: 12px;
li{
a{
&:hover{
background: green;
}
}
}
}
}
运行结果如下:
#footer {
color: red;
}
#footer > ul {
font-size: 12px;
}
#footer > ul li a:hover {
background: green;
}
2.5运算
@width:300px;
div{
width:@width;
height: @width / 2;
}
运行结果如下:
div {
width: 300px;
height: 150px;
}
2.6import引入
@import "./import.less";
.home{
color: @color;
}
.home {
color: red;
}