Sass 技术和相关工具介绍

（欢迎访问：http://www.3body.tk/iblog/）

Sass是一个建立在CSS上面的元语言(meta-language),相对于CSS来说，它能够使用更加整洁和结构化的语法来描述文档的样式。Sass提供了一个简单，优雅的CSS语法，同时还实现了很多方便管理样式表的特性。

安装Sass需要的工具

Linux 用户:

sudo apt-get install ruby1.9.1 

Sass是使用Ruby实现的,所以你必须安装Ruby环境。

sudo gem install sass 

Sass是CSS3的扩展, 增加了嵌套规则，变量，混入，选择器继承等等。

sudo gem install compass

Compass是一个开源CSS生成框架

Windows 用户:

对于windows用户，需要先安装Ruby gem 然后执行下面的命令：

gem install sass
gem install compass

MAC 用户:

gem install sass
gem install compass

使用compass创建一个工程

cd path/to/where-you-want-your-project 

定位到你想创建工程的目录，对于一个自定义的theme来说，一般是 sites/all/themes。

compass create project-name 

上面的命令会使用project-name 创建一个文件夹，并将你的工程安装到这个文件夹里。

自动监视并编译compass的改变

cd path/to/project
compass watch
// 或者使用下面的快捷写法
compass watch path/to/project

如果想手动编译，执行下面的命令：

compass compile [options]

这个命令的详细参数可以参考：

http://compass-style.org/help/tutorials/command-line/

http://compass-style.org/help/tutorials/production-css/

一些实用的Sass示例

sass中的变量

全部使用同样的颜色和宽度。Sass支持变量并支持对变量做数学运算。

.SCSS Syntax
$blue: #3bbfce;
$width: 100px;
.main{
  color: $blue;
  width: $width;
}

.footer {
  width: $width / 2;
}

上面的代码会输入下面的css：

.main{
  color: #3bbfce;
  width: 100px;
}

.footer {
  width: 50px;
}

Sass的嵌套机制

Sass可以对选择子进行嵌套使用，避免重复的定义。对于属性也同样可以使用。

.SCSS Syntax

#navigation #main-menu ul {
  background: #e5e5e5;
  border: 1px solid #e2e2e2;
  li {
    padding: 5px 10px 5px 10px;
    &:hover {
      background: #ccc;
        a {
      color: #fff;
    }
    }
    a {
    text-decoration: none;
    text-shadow: 1px 2px rgb(211, 200, 200);
  }
  }

}

上面的代码会输入下面的css：

#main-menu ul {
  background: #e5e5e5;
  border: 1px solid #e2e2e2;
}

#navigation #main-menu ul li {
  padding: 5px 10px 5px 10px;
}

#navigation #main-menu ul li:hover {
  background: #ccc;
}

#navigation #main-menu ul li:hover a {
  color: #fff;
}

#navigation #main-menu ul li a {
  text-decoration: none;
  text-shadow: 1px 2px #d3c8c8;
}

Sass中的混入

混入比变量更加有用，你可以重用整个CSS，属性或者选择子的代码段。甚至可以使用传入参数。

.SCSS Syntax

@mixin left($dist) {
  float: left;
  margin-left: $dist;
}

#data {
  @include left(10px);
}

上面的代码会输入下面的css：

#data {
  float: left;
  margin-left: 10px;
}

翻译自http://drupal.org/node/1913280