在webstorm下使用compass和sass

sass的安装使用以及在webstorm下的监听

工具/原料

电脑(windows7 +)

webstorm10

方法/步骤

之前为了进阶css，狠抓了一下sass(现在叫scss，编程风格和css类似)和它的框架compass，由于本人对命令行的恐惧，因此总想将其弄到IDE中。

先安装ruby，sass，compass。

http://www.w3cplus.com/sassguide/install.html

链接里没有compass。直接键入下面的命令行：

gem install compass

可以用sass -v 和 compass -v 查看版本。

创建一个compass 项目。

compass create yourProjectName

打开webstorm，进入setting -> Tools -> File Watchers.

添加一个compass scss 监听器。

当你引用compass的内建库如 @import "compass/css3" 时，webstorm会给你报错，这是你需要进行下面的操作。

setting -> Languages && Frameworks -> Compass

记得 应用 和 保存。

如果你想在在谷歌中直接看到 xxx.scss 而不是编译后的css , 需要进行下面的配置。

在谷歌中按 F12，在 Setting -> General -> Source。

对 config.rb 中 添加 sourcemap = true

html中只能引入scss产生的css，不可以直接引用scss