一、less
1. 介紹
less是css的預(yù)編譯語言，它已具備一門開發(fā)語言的基本語法和特殊語法惭蟋，包括變量廉嚼、函數(shù)、混合辅柴、嵌套箩溃、科學(xué)計(jì)算等等，同時(shí)less非常適合css的模塊化開發(fā)碌嘀，less文件里也可以直接寫css涣旨。
2. 部分基礎(chǔ)語法
2.1 變量
變量可以用來存很多類型，常用于存css的屬性值和屬性股冗，變量的命名格式和js標(biāo)識(shí)符相同霹陡。
@color=#f00;
.box{ color: @color; }
2.2 混合
可以把多個(gè)less對(duì)象混合為一個(gè)，混合的css屬性會(huì)按照順序從最后往前覆蓋相同屬性止状。
@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 多層級(jí)
這個(gè)不好解釋烹棉，看代碼吧
.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 導(dǎo)入其他less或者css
@import 'lbs' less文件 或者 @import 'libs.css' css文件
二、gulp-less插件
gulp-less是gulp引用less的插件怯疤，通過合理的配置浆洗，可以自動(dòng)編譯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(){
// 監(jiān)控less文件的變化，自動(dòng)編譯為css
gulp.watch('./less//.less', ['compile-css']);
})
gulp.task('default', ['compile-css', 'auto']);
相關(guān)鏈接：
- less官中：點(diǎn)此鏈接
- less其他教程： 點(diǎn)此鏈接
- gulp-less：點(diǎn)此鏈接
參考框架：
- bootstrap less版本: 點(diǎn)此鏈接
