webstorm配置compass

1、compass安装

compass与sass配合写css很方便，也很简单，避免了一些变量和浏览器的兼容问题。安装compass与sass一样，命令行输入gem install compass即可。

创建一个新的compass工程，命令行输入compass create newproject。在生成的工程中，分类有images、sass、stylesheets和config.rb。config.rb中指定了sass和css的目录。

2、webstorm配置

webstorm->File->Setting中增加对compass scss的支持，如下图所示：

设置对compass 的默认支持，如下图：

指向工程目录中的config.rb。

这里有个疑问，config.rb中有个css_dir输出目录，在File Watchers中也有个输出文件目录，这两者目前还不清楚，大家自行试试。

这里我们可以试试compass的写法了，例如在默认生成的文件ie.css中：

@import "compass/css3";
$blue : #0000ff;

#border-radius {
  @include border-radius(25px);
}

div {
  background-color: $blue;
  @include border-radius(5px);
}

p {
  background-color: $blue;
}

，然后保存后会自动生成为：

#border-radius {
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  border-radius: 25px;
}

/* line 13, ../live/sass/ie.scss */
div {
  background-color: #0000ff;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

/* line 18, ../live/sass/ie.scss */
p {
  background-color: #0000ff;
}

可以看到@include border-radius(25px); 变成了
-moz-border-radius: 25px;
  -webkit-border-radius: 25px;

是不是很方便。