简单给你说就是scss是css的前身，scss通过编译后生成css,css可以直接在网页中使用，如果scss没有经过编译的话；网页中不能使用和识别的，除非你安装第三方插件支持
在使用带有工作区和源地图的Chrome并设置了本地/网络文件时，我可以使用Chrome Web检查器(在Elements->styles窗格下)识别选择器在正确的SCSS文件中的位置。另外，我可以单击该按钮，将其转到SCSS文件，进行更改，然后将其成功保存到文件系统中。但是，我以前的工作是在elements->styles面板中进行了更改以在SCSS文件中进行更新(即，如果我在Elements选项卡中进行了更改并检查了chrome中的SCSS文件，则应该对其进行了更改)。相反，它将对CSS文件进行更改。显然，这不是非常有用，因为：
更改SCSS文件后，它将被覆盖
这意味着即使重新加载后，Chrome也会显示SCSS文件中没有的样式，因为样式会永久保存在CSS文件中
我已经使用Sass 3.3.6在OSX和Windows上进行了尝试。
也可以确认不是＃9中提到的" ../"问题
https://code.google.com/p/chromium/issues/detail?id=273384，因为sass文件现在位于css文件中。样式表标签上也没有style.css？ver = x扩展名。
您想要的是https://code.google.com/p/chromium/issues/detail?id=257778。 通常，如果涉及变量或复杂的语言功能，则在"样式"面板被编辑时不可能(模糊)在CSS上修补SCSS，因此最好的选择是Ctrl，然后在"样式"窗格中单击所需的CSS属性以导航到 相应的SCSS片段并编辑纯SCSS资源文本，然后保存(Ctrl + S)，然后让sass编译器(在监视模式下运行)完成其余工作。 您应该同时启用Enable CSS source maps和Auto-reload generated CSS设置，以使DevTools能够拾取生成的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 。
