在 Windows 上使用 PHPStorm 使用 SASS 进行开发答案

【问题标题】：Developing with SASS using PHPStorm on Windows在 Windows 上使用 PHPStorm 使用 SASS 进行开发
【发布时间】：2014-01-09 05:16:27
【问题描述】：

我在 Windows 上运行 PHPStorm IDE。

我想开始使用 Zurb Foundation 并使用 SCSS 编写我的样式表。我需要安装 Ruby 或 Compass 吗？

每当我编辑 .scss 文件时，有没有办法让 PHPStorm 在我的项目中（在每个项目的自定义路径中）为我自动编译 .css 样式表？

我已经看到了这个http://www.jetbrains.com/phpstorm/webhelp/transpiling-sass-less-and-scss-to-css.html，但看起来这些说明是针对 unix 系统的，而我运行的是 windows。

到目前为止，我做了以下工作：

我已经安装了http://rubyinstaller.org/ 然后
在 ruby/bin 文件夹中成功安装了 sass 和 compass gem
在此之后，我指向 PHPStorm 中的项目设置并告诉在哪里寻找指南针

此时我该怎么办？使用 Compass 变量为我的项目定义一个 config.rb，以便在哪里查找 SASS 文件以及在哪里编译它们？我还应该做什么？

【问题讨论】：

blog.jetbrains.com/webstorm/2013/12/using-compass-in-webstorm（与confluence.jetbrains.com/display/WI/Using+Compass相同）
@LazyOne 有趣但没用；我试图用 Foundation 启动一个项目，但我没有看到任何文件被创建。然后从终端我输入“compass init”，但它说不是一个可识别的命令。我确实尝试从设置面板配置指南针，仍然没有用。
这是官方手册。如果它不起作用，那么很可能您身边缺少/错误的东西。我已经在 simple 项目上进行了尝试（只有几个文件，一点也不严重 - 只是为了测试目的）并且编译对我有用（Windows 7）。 “不是一个可识别的命令”——很可能是 Windows 无法找到可执行文件（它不在 PATH 环境中……或者它尚未传播到 IDE——就像在@987654325 中一样@案例）
我发现jetbrains.com/phpstorm/webhelp/using-file-watchers.html 对设置 Sass 观察者很有帮助

标签： ruby windows sass phpstorm compass-sass

【解决方案1】：

如果你不使用指南针特定的东西，比如它的特定功能和 mixin，我建议使用 SASS 转译器从 SCSS 中创建 CSS。

SCSS 文件监视器设置相当简单，您不需要创建任何 rb 文件。

类似：

Program: C:\Ruby193\bin\scss.bat
Arguments: --no-cache --update $FileName$:$FileNameWithoutExtension$.css
Working directory: $FileDir$
Output paths: $FileNameWithoutExtension$.css

请注意，正如 @LazyOne 所提到的，您需要在 PATH 中包含 C:\Ruby193\bin 才能使其正常工作。

【讨论】：