less的基础语法

126 阅读1分钟

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;
}