在webstorm下使用compass 和 sass

1. 原文地址 http://jingyan.baidu.com/article/fa4125acde99f928ac7092a9.html

2. 1

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

3. 2

   先安装ruby，sass，compass。

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

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

   gem install compass

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

   创建一个compass 项目。

   compass create yourProjectName

4. 3

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

   添加一个compass scss 监听器。

5. 

6. 

7. 

8. 4

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

   setting -> Languages && Frameworks -> Compass

   记得 应用 和 保存。

9. 

10. 5

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

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

    对 config.rb 中 添加 sourcemap = true

    
    

11. 

12. 

13.