一、less
1. 介绍
less是css的预编译语言，它已具备一门开发语言的基本语法和特殊语法，包括变量、函数、混合、嵌套、科学计算等等，同时less非常适合css的模块化开发，less文件里也可以直接写css。
2. 部分基础语法
2.1 变量
变量可以用来存很多类型，常用于存css的属性值和属性，变量的命名格式和js标识符相同。
@color=#f00;
.box{ color: @color; }
2.2 混合
可以把多个less对象混合为一个，混合的css属性会按照顺序从最后往前覆盖相同属性。
@color=#f00;
@bg=#0f0;
.box{ color:@color; }
.box-bg{ background-color:@bg; }
.box-contain{
font-size: 12px;
.box;
.box-bg;
}
编译为css代码：
.box{ color:#f00; }
.box-bg{ background-color:#0f0; }
.box-contain{ font-size: 12px; color: #f00; background-color: #0f0; }
2.3 多层级
这个不好解释，看代码吧
.box-contain{
box-sizing: border-box;
.box-top{}
.box-content{}
.box-bottom{}
&-height{ height:98px;line-height:98px; }
&:before{ content:'';display:block; }
}
编译为css代码：
.box-contain{ box-sizing: border-box; }
.box-contain .box-top{}
.box-contain .box-content{}
.box-contain .box-bottom{}
.box-contain-height{ height:98px;line-height:98px; }
.box-contain:before{ content:'';display:block; }
2.4 导入其他less或者css
@import 'lbs' less文件 或者 @import 'libs.css' css文件
二、gulp-less插件
gulp-less是gulp引用less的插件，通过合理的配置，可以自动编译less文件为css文件
安装：npm install less -D && npm install gulp-less -D
使用：
const less = require('less');
const gulp = require('gulp');
gulp.task('compile-css', function(){
return gulp.src('./less//.less').pipe(less()).pipe(gulp.dest('./dist/css'))
})
gulp.task('auto', function(){
// 监控less文件的变化，自动编译为css
gulp.watch('./less//.less', ['compile-css']);
})
gulp.task('default', ['compile-css', 'auto']);
相关链接：
参考框架：
- bootstrap less版本: 点此链接
