Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
一.安装
全局安装：cnpm install -g less
局部安装：cnpm install --save-dev less
你的目标文件出现下图所示代表安装成功：
二.编译less
1.命令行编译
lessc 文件.less 文件.css
创建一个index.less文件
在控制台中输入口令
编译完成后会自动生成一个名为index.css的文件
2.考拉软件 /同步编译 http://koala-app.com/index-zh.html
3.Webstorm 配置自动编译less
4.js脚本编译 适用于后端
5.gulp也能帮我们编译
三.less使用
1.变量（Variables）
@color：#f8f8f8;
.box{
width:100px;
height:100px;
background:@color;
}
考拉自动编译为：
.box {
width: 100px;
height: 100px;
background: #ff00ff;
}
2.混合（Mixins）
.sizebox(@width:200px,@height:100px){
width:@width;
height:@height;
backdround:pink;
}
.box1{
.sizebox(100px,100px);
}
.box2{
.sizebox(100px,100px)
}
3.嵌套（Nesting）
.container{
@container-width:100px; //变量法
width:@container-width;
height:50px;
.header{
width: 100px;
height: 100%;
background: skyblue;
.nav{
text-align: center;
ul{
li{
ist-style: none;
a{
color: white;
display:block;
&:hover{
color: blue;
}
}
}
}
}
}
}
4.运算（Operations）
1)加减乘除
.box3{
width: 100px / 2;
height: 100px * 2;
font-size: 15px + 5px;
font-weight: 800 - 100;
color: #222 * 3;
}
2)函数
//自动计算rem
.boxrem(@value){
width:@value / 50rem;
}
.box{
.boxrem(67); //1.34erm
height: max(10px,20px,30px); // 30
}
3）引导(判断)
.num(@value) when(@value < 100){
color: red;
}
.num(@value) when(@value >= 100){
color:green;
}
.box6{
.num(99);
}
4）继承
.box7{
color: red;
background: green;
}
.box8{
&:extend(.box7);
width: 100px;
}
网友评论