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;
}
评论 (0)