让Compass支持sourcemap选项

使用Sass或Less的同学都知道sourcemap这个选项,编译时开启该选项后将生成map文件,非常利于我们调试Sass代码。

看一个浏览器调试sourcemap debugging效果:

可以看到,右侧的代码位置会直接定位到相应的Sass代码。

如何开启sourcemap?

Sass/Less: 在Koala中勾选sourcemap选项即可。

Compass: 目前还不支持Sass的sourcemap选项,需要安装额外一个库。
首先需要在本地安装好ruby, Sass, Compass.

下载并安装ruby: https://www.ruby-lang.org/zh_cn/downloads/

安装Sass & Compass

$ gem install sass
$ gem install compass

安装compass-sourcemaps

$ gem install compass-sourcemaps --pre

在Compass项目配置文件config.rb中增加enable_sourcemaps配置

# enable sourcemaps
enable_sourcemaps = true
sass_options = {:sourcemap => true}

Koala设置:
因为需要调用本地的compass-sourcemaps库,所以需设置Koala调用系统组件。
Koala设置 –> Compass –> 使用系统组件

现在已经为Compass项目开启sourcemap选项了,编译一个SASS文件试试,你将在CSS输出目录看到相应的map文件。

如果还看不到上面第一个图片上的调试效果,请检查你是否在Chrome浏览器中开启“Enable CSS source maps”选项。
Chrome设置:打开Devtools, 点击右上角的settings图标,找到“Sources”, 勾选“Enable CSS source maps”.

推荐使用前端工具Koala: http://koala-app.com/

7 comments on “让Compass支持sourcemap选项

  1. 向OKLAI学习了。
    Sourcemap配合Chrome里面的Workspace,可以同步更新本地Less.less和less.css。

  2. http://koala-app.com/ – awsome app by the way, however in an update would you be able to fix the ui layout. When i add a folder the name can be quite long – when I have a lot of folders added it is hard to see the names of each folder – also could you make it so you can order the folders or at least order them alphabetically.

    Many Thanks

一生一世套图进行回复 取消回复

电子邮件地址不会被公开。 必填项已用*标注