请问浏览器如何调试sass，能不能像调试css那样直接看到效果？

Question

各位前辈，我想请问你们用sass写样式的时候，是如何在浏览器进行调试的？？？

我今天打算练习一下用sass代替传统css写法，但是在浏览器调试的时候，我发现了一个很致命的问题。。

以往调试css的时候，很方便，可以直接修改样式，并且立马看到结果。像这样

想调多少就调多少，效果立马出，很方便修改。

但是当我用了sass之后，我发现每次修改都要这样子

要切换到sources这里修改，而且效果还要刷新之后才能看到，最要命的是，在这里调试是没有css代码提示的 ORZ···············································

请问前辈，用sass写样式就只能这样子开发了吗？？？还是就是这样子开发，我不适应是因为我能力的问题。。望前辈指导一下！

Answer 1

这不是能力问题。
你可以用构建工具预编译一下。
var gulp = require('gulp');
// 引入依赖包
var sass = require('gulp-sass');
gulp.task('sass', function(){

//sass()方法用于转换sass到css

return gulp.src('/app/scss/styles.scss')

.pipe(sass()) // Converts Sass to CSS with gulp-sass
.pipe(gulp.dest('app/css'))

});
//实现监听
gulp.task('watch', function(){
gulp.watch('app/scss/*/.scss', ['sass']);
// Other watchers
})

Answer 2

一点儿粗浅的看法啊，仅供参考：

• sass 代码部署、发布上线之前是需要编译的
• 浏览器只认识 css 代码
• 你在开发环境中应该部署一个测试环境，而你的测试环境中 sass 是经过编译的
• 在测试环境下，调试代码，调试好了，再去修改 sass 源代码
• 开发环境的代码到测试环境的代码甚至到部署上线的代码，编译过程都是自动化完成的

Answer 3

sass编译为css文件时记得输出sourcemap文件，这样调试的时候可以看到具体在sass文件的哪一行
具体用以下命令：
sass --watch style.scss:style.css --sourcemap
--sourcemap表示开启sourcemap调试。开启sourcemap调试后，会生成一个后缀名为.css.map文件。

Answer 4

浏览器只认识CSS。Sass这类CSS预处理器需要编译。
推荐看看课程：慕课网 Sass 编译
或者下载实时编译软件。koala

koala是一个前端预处理器语言图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、linux、mac。

Answer 5

只是练习下的话，可以考虑使用gulp，只需要简单配置下，监听文件修改，自动编译这些功能做做练习还是挺方便的。

Answer 6

1、简单一点的就是用编辑器自带的编译插件编译Sass的同时输出sourcemap文件，然后直接引用css，浏览器会定位到Sass文件行数。
例如sublime里面的less2css插件

把createCssSourceMaps改为true就行了
2、就是利用gulp之类的构建工具就行自动化编译、压缩、合并。没用过的话上网搜一下教程，很好学的。

Answer 7

你可以先编译，在chrome，firefox上是可以直接看到scss的源码。编译的话可以采用上面几位大佬说的gulp，webpack等。如果项目比较小的话，嫌配置麻烦的话，还可以采用ruby进行编译。这里有教程http://www.w3cplus.com/sassgu...