PHPStorm 安装 SASS、SCSS + Compass

许久没更新博客啦,这两天研究了下 SASS 和 LESS ,最终选了 SASS,因为相对比较成熟些吧,试了很多坑之后,终于成功了,下面上步骤:


1. 安装 PHPStorm 的 SASS 插件

好像是自带了该插件的,如果没有的话,就打开 setting -> plugins  自己安装一个吧,就不多说了

技术分享


2. 安装 Ruby

Windows 版本下载地址:

http://rubyinstaller.org/downloads/

技术分享


Linux or Mac 地址:

http://ruby.taobao.org/mirrors/ruby/


我用的是 windows 版最新的 2.2.1 版本

配置好系统环境,将ruby 的bin目录绝对路径添加到 path 环境变量中,windows版安装的时候可以勾选自动添加

可参考这片博文:

http://www.w3cplus.com/css/css-preprocessor-sass-vs-less-stylus-2.html


3. 安装 SASS 和 Compass

因为天艹局域网的关系,你可能需要重新设置下更新源地址:

命令行下执行:

gem sources --remove https://rubygems.org/
gem sources -a https://ruby.taobao.org/


可以参考下这篇文章:

http://devework.com/sass-compass.html


下面执行安装啦:

gem install sass
gem install compass


4. 新建 Compass + SASS 项目

创建一个项目根目录,cd 进入后,执行:

compass create your_project_name


技术分享


会生成三个文件夹和一个 config.rb 文件

在 sass 目录下存放我们自己的样式代码,编译后会自动生成到 stylesheets 目录下,当然你也可以自定义生成地址


5. 配置 Compass 编译环境

打开 setting -> Language & Framework 下面有个 Compass 

技术分享


勾选 Enable 后 设置你自己安装的 ruby  comopass.bat 路径 和 当前项目的 config.rb 文件路径



6. 配置 SASS 环境

打开 setting -> Tools -> FileWatchers

点击右侧绿色的加号 添加一个 compass scss 项目,配置如下

技术分享


应该使用默认的配置就可以的了。

working directory 就是你 刚才用 compass create 的项目目录(我这里只是文件夹名字是 less 不要误解了啊)


7. 开始写代码了

@import "compass/reset";
@import "compass";

$fc: #FFF;
$fs: 16px;

body { background-color: #555; }

#panel {
  color: $fc;
  font-size: $fs;
  .title {
    padding: 1em;
    background-color: #888;
    color: $fc;
  }
  .item {
    float: left;
    width: 49%;
    min-height: 3em;
    padding: 1em;
    margin: 1.5%;
    border: solid 1px $fc;
    box-sizing: border-box;
    background-color: #999;
    @include box-shadow(1px 2px 3px #000);
  }
}

一个简单的测试代码,每次更改后,会自动编译,但不会自动生成 css 文件的,你可以在命令行下进行生成

命令如下:

compass compile


或者强制编译更新

compass compile --force

然后你再看看 stylesheets 下面就多出一个对应名称的 css 文件

这个代码会有很大一堆我就不上代码了,包含了 reset 的样式和你自己的样式 还有注释都保留了的,因为这是开发环境,

如果是正式环境,需要进行压缩

下面来改下配置,进入正式环境,将生成的代码压缩成一行

打开项目根目录下的 config.rb 文件

添加两行代码:

environment = :development
output_style = (environment == :production) ? :compressed : :expanded

当 environment 为 :production 时生成的 css 文件将会是压缩成一行的样子了。


好了 全部完成,现在开始快速开发你自己的 css 吧




如果你只需要用 SCSS 的话,在第6步你可以新建 SCSS 配置,下面是配置截图


技术分享





下面贴一些其他参考的文章地址:

http://www.jetbrains.com/phpstorm/help/working-with-sass-and-scss-in-compass-projects.html#d233223e455

http://www.ruanyifeng.com/blog/2012/11/compass.html

http://sass-lang.com/documentation/file.SASS_REFERENCE.html

http://compass-style.org/install/






郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。