使用 gulp 編譯 LESS

Less 是一門 CSS 預(yù)處理語言，它擴充了 CSS 語言，增加了諸如變量、混合（mixin）、函數(shù)等功能，讓 CSS 更易維護。

安裝

npm install gulp-less

基本用法

你可以 下載所有示例代碼 - 或在線查看代碼

// 獲取 gulp
var gulp = require('gulp')
// 獲取 gulp-less 模塊
var less = require('gulp-less')

// 編譯less
// 在命令行輸入 gulp images 啟動此任務(wù)
gulp.task('less', function () {
    // 1. 找到 less 文件
    gulp.src('less/**.less')
    // 2. 編譯為css
        .pipe(less())
    // 3. 另存文件
        .pipe(gulp.dest('dist/css'))
});

// 在命令行使用 gulp auto 啟動此任務(wù)
gulp.task('auto', function () {
    // 監(jiān)聽文件修改，當文件被修改則執(zhí)行 images 任務(wù)
    gulp.watch('less/**.less', ['less'])
})

// 使用 gulp.task('default') 定義默認任務(wù)
// 在命令行使用 gulp 啟動 less 任務(wù)和 auto 任務(wù)
gulp.task('default', ['less', 'auto'])

你可以訪問 gulp-less 以查看更多用法。

LESS 代碼和編譯后的CSS代碼

less/a.less

.less{
    a{
        color:pink;
    }
}

less/import.less

@import "a.less";
.import{
    a{
        color:red;
    }
}

less/a.css

.less a {
  color: pink;
}

less/import.css

.less a {
  color: pink;
}
.import a{
  color: red;
}