不知道怎么使用sass转换成css

html-css03

不知道怎么使用sass转换成css,第1张

安装gulp和gulp-sass:

然后编写一个gulpfile.js的文件,在cmd窗口运行 gulp sass

var gulp = require('gulp')

var sass = require('gulp-sass')

gulp.task('sass', function () {

return gulp.src('./*.scss')

.pipe(sass().on('error', sass.logError))

.pipe(gulp.dest('./css'))

})

如:在D盘建立一个SASS文件夹,文件夹下有一个style.scss文件(scss,sass都行。sass文件对代码的排版有着非常严格的要求,而且没有大括号,没有分号。scss对代码的要求没那么高。)用下面的方法可以将sass或者scss转换为css文件。

首先输出 D: 代表找到D盘 ;

然后输出cd sass 代表找到sass文件夹,其中cd是一定要的;

最后输出 sass>sass --watch style.scss:style.css 在sass文件夹下将style.scss转换为style.css 。sass --watch代表一直监听着style.scss 只要在编辑器上更新了scss就会自动更新style.css 。

比如你写了一个sass文件,叫index.scss,需要编译成css文件(index.css),

可以使用这个命令:

sass index.scss index.css

当然,sass一般是和compass结合这用,你可以用这个命令:

compass watch

这个命令会把所有的scss文件编译成css文件,并且还会监听这scss文件的变化,一有变化就重新编译一下。。

如果你有前端自动化环境,拿grunt来说,配置好watch任务也能监听scss文件变化并自动化编译,命令是:

grunt watch

grunt serve