Sass + Compass

Sass 是一种 CSS 的开发工具,是对 CSS 的一种扩充,提供了许多便利的写法,节省了设计者的时间,使得 CSS 的开发,变得简单和可维护。

Compass 在 Sass 的基础上,封装了一系列有用的模块和模板,补充 Sass 的功能。

Sass 官网:https://sass-lang.com/
Sass Github:https://github.com/sass

Compass 官网: http://compass-style.org/

安装 Ruby

Sass 与 Compass 都是 Ruby 语言写的,需要使用Ruby Gems 安装,意味着我们先安装 Ruby。哎呀,有点不爽。

Ruby官网:http://rubyinstaller.org/

下载安装后检查一下:

ruby -v
ruby 2.0.0p481 (2014-05-08 revision 45883)

Sass

Gems 安装 Sass

因为国内网络原因 ruby gems 会连接失败,我们可以使用 ruby.taobao.org 提供的镜像。

切换 gem 源至 taobao 并安装 Sass

# 切换taobao源
gem sources --remove https://rubygems.org/
gem sources -a https://ruby.taobao.org/
gem source -l

# 安装
gem install sass

检验 Sass 是否安装成功

sass -v
Sass 3.4.22 (Selective Steve)

体验一下

使用官网上的例子,创建 demo.scss 文件,为什么扩展名是scss而不是sass?

因为 Sass 本来就支持这两种语法文件格式,可 sass 连大括号都没有,多少有点怪异。

nav {
    /* 这是注释 */
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    li { display: inline-block; }

    a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
    }
}

我们到命令行执行一下:

sass --style compressed demo.scss demo.css

最终编译生成了 demo.css 文件

nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }

/*# sourceMappingURL=demo.css.map */

几种输出格式 --style:

  • nested:嵌套缩进的css代码,它是默认值。
  • expanded:没有缩进的、扩展的css代码。
  • compact:简洁格式的css代码。
  • compressed:压缩后的css代码。

我一般喜欢使用compact,也就是上面那种格式,至少还有一点可阅读性,并且当你使用版本库的时候因为是多行,不易产生冲突。compressed 是压缩后的css 文件,只有1行,我觉得在服务端开启 gzip 以后差异很小。

sass 还有一些其他的指令(watch 监控文件变动)等,以及详细语法可自行查阅。

Compass

Gems 安装 Compass

gem install compass

compass -v
Compass 1.0.3 (Polaris)

体验一下

创建一个项目,其实就是生成了一些示例文件,几个目录,一个config.rb配置文件:

compass create demo

demo
├── config.rb
├── sass
│   ├── ie.scss
│   ├── print.scss
│   └── screen.scss
└── stylesheets
    ├── ie.css
    ├── print.css
    └── screen.css

 
看一下配置文件,上面注释已经很详细了,默认就是配置了 sass 目录,css 输出目录等。

在项目目录执行一下,会自动扫描sass目录编译输出到stylesheets目录中:

compass complie

通过最终输出的css文件,我们需要在 config.rb 里面调整一下配置:

output_style = :compact
sourcemap = true
line_comments = false

监控文件变动

大概有几种方法

  • 项目目录命令行执行 compass watch
  • 借助第三方软件,如支持多平台的Koala:http://koala-app.com/
  • 使用IDE集成功能,如PHPStorm
  • 使用构建工具

这里主要介绍下 PHPStorm 的配置:

  1. 打开:Preferences -> Languages & Frameworks -> Compass,启用 Compass 并选择你系统安装compass的路径
  2. 打开:Tools -> FileWatchers,添加一条 compass scss 的 Watch,注意勾掉 Immediate file synchronization 选项,意思是保存的时候才进行编译。