【前端日记-gulp系列-gulp与less】

一、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']);

相关链接：

• less官中：点此链接
• less其他教程： 点此链接
• gulp-less：点此链接

参考框架：

• bootstrap less版本: 点此链接