less入门
- 安装
首先安装node,执行命令node install -g less
安装完成后可以在任意窗口中使用lessc命令,将.less文件编译成css文件。 变量
可以像其他语言一样声明变量@bgc:#ccc p{ background-color:@bgc; }
执行命令lessc style.less style.css
- 混入
允许将已有的class和id的样式应用到另一个不同的选择器上
#circle{ background-color: #4caf50; border-radius:100% } #small-circle{ width: 50px; height: 50px; #circle }
#circle(@size:25px){ background-color: #4caf50; border-radius:100% width:@size; height:@size; } #small-circle{ #circle(50px) }
- 嵌套
可以用于已与页面的html结构相匹配的方式构造样式表,减少冲突的机会
```
ul{
background-color:@bgc;
padding:10px;
li{
background-color:@bgc;
border-top:1px solid #ccc;
}
}
```
- 运算
可以对数值和颜色进行基本的数学运算
``` @div-width:100px;
@color:#ddd;
#div{
width:300-@div-width;
color:#ddd-100
}
```
- 函数
@bgc:#e0e0e0 div{ height:30px; width:50px; background:@bgc; &:hover{ background-color:fadeout(@bgc,50%) } }