Less扩展语言编译安装

Less转CSS

首先可以引入使用less.js将less解释为css样式。也可以使用命令行转换的方式进行.less文件向.css文件的转换，可以使用gulp构建工具中的gulp-less进行自动转换

const gulp = require('gulp');
var less = require('gulp-less'); //less
var sass = require('gulp-sass')(require('sass')); //sass
var scss = require('gulp-scss'); //scss
var ts = require('gulp-typescript');

//文件监听
gulp.task('watch', function () {
  //sass监听
  gulp.watch('src/css/sass/*.scss', function () {
    return gulp
      .src('src/css/sass/*.scss')
      .pipe(sass())
      .pipe(gulp.dest('dist/css'));
  });
  //less监听
  gulp.watch('src/css/less/*.less', function () {
    return gulp
      .src('src/css/less/*.less')
      .pipe(less())
      .pipe(gulp.dest('dist/css/'));
  });
});

语法实践

变量

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}