Sass 技术跟相关工具介绍

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 sassgem install compass

MAC 用户:

gem install sassgem 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/projectcompass 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