标签：style blog http color io java ar strong for
旧版的chrome有个support for sass，但是新版chrome没有这个功能了。看到网上提供的方法比较多，也很乱，旧版新版的都有。而且不能指定自己所需要的路径。
所以就做了下改版。
sass和less都有提供一个map文件，这个文件是用来干嘛的呢？
.map文件是一个json格式的文件，可以直接调试less/sass源文件。
========================================================
先是less配置(sass配置基本与less一致，只是运行参数不太一样)
1.在chrome中开启dev工具，开启CSS source maps设置
2.webstorm中只要创建了less扩展名的文件，就会有提示只要你同意就会创建一个file watchers任务，但是这个默认的任务只能编译出css。我们需要对这个任务进行一些小小的修改，以便能达到产出sourcemap。
原来的配置
3.修改后的配置
主要修改Arguments
Arguments
$FileName$ $FileParentDir$\css\$FileNameWithoutExtension$.css --source-map
意思是在指定的css目录下生成的css和map文件
4.目录如下
5.其实，只要明白less的命令，在Arguments中设置正确的路径就行了，不配置Output paths to refresh也可以达到一样的效果。
lessc bootstrap.less ../css/bootstrap.css --source-map
6.sass的配置方法也是一样
它生成css和map的命令行参数如下：
sass bootstrap.scss:../css/bootstrap.css --sourcemap --no-cache
在Arguments 中的参数如下
--no-cache --sourcemap $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css
7.在html中，加入css文件
<link rel="stylesheet" href="../themes/css/bootstrap.css">
其实可以打开css文件看下，最后一行有个
/*# sourceMappingURL=bootstrap.css.map */
引用的.map文件。。
之前为了方便调试，把.map和css生成到同一个目录下。
当打开页面访问的时候，点击样式
8.LiveStyle
Chrome插件LiveStyle可以结合Sublime Text3编辑器实现无刷新的同步css更新。效果也是不错，可以借鉴。
不过还是喜欢sass/less结合webstorm的调试方式。
================
9.新增compass配置
在Arguments 中的参数如下
compile
Output paths to refresh
$FileNameWithoutExtension$.css
config.rb中配置如下。
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
目录结构如下
转载自：http://blog.csdn.net/ylh644894056/article/details/25924171
支持新版chrome，用webstorm编译形成css和sourcemap，调试sass和less源文件（转）
标签：style blog http color io java ar strong for
原文地址：http://www.cnblogs.com/JoannaQ/p/3987403.html
