Sass 增强语法的样式表

功能：

• 完全兼容CSS3
• 相对CSS，扩展了变量、嵌套和mixins
• 对控制颜色和其他值的非常有用的方法
• 高级功能，如库的直接控制
• 良好的格式，自定义输出

语法

对于Sass，有两种语法。

一种叫SCSS（Sassy CSS），它是CSS语法的扩展，也就是说，每个有效的CSS3样式对于一个有效的SCSS。并且SCSS理解更多的CSS技巧和厂商特性，里如果IE8的filter语法。

第二种是旧些的语法，叫SASS。提供一种写CSS的便捷方式。

前者的文件后缀名是.scss，后者是.sass。

使用Convert命令可以相互转换：

sass-convert style.sass style.scss

反之亦然

使用方法

1. 安装

$gem install sass

2. 转换

sass input.scss  output.css

3. 监控

$sass --watch input.scss:output.css

目录：

$sass --watch app/sass:public/stylesheets

CSS扩展

1. 嵌套规则

　　Sass允许CSS嵌套到另外一个CSS中。例如：

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

　　编译后：　　

#main p {
    color: #00ff00;
    width: 97%;
}
#main p .redbox {
    background-color: #ff0000;
    color: #000000;
}

2.引用父选择器:&

　　在嵌套使用中，有时候需要引用父元素：　　

a {
    font-weight: bold;
    text-decoration: none;
    &:hover { text-decoration: underline; }
    body.firefox & { font-weight: normal; }
}

　　编译后：　　

a {
    font-weight: bold;
    text-decoration: none; }
    a:hover {
        text-decoration: underline;
    }
    body.firefox a {
        font-weight: normal;
}        

3.嵌套属性

　　在同一个命名空间下,CSS有时候会有多个属性，例如font-family,font-size和font-weight都在font命令空间下。使用嵌套，将减少输入。Sass提供冒号(:)来支持这个方法。例如：　　

.funky {
    font: {
        family: fantasy;
        size: 30e m;
        weight: bold;
    }
}

　　编译后：

.funky {
    font-family: fantasy;
    font-size: 30em;
    font-weight: bold;
}

　　也是可以带值的

.funky {
    font: 20px/24px fantasy {
        weight: bold;
    }
}

　　编译后：

.funky {
  font: 20px/24px fantasy;
    font-weight: bold;
}

注释

　　方法：/*  */或者//

@规则

1. @import

　　导入SCSS和Sass文件。所有导入的文件都会被合并成一个单独的CSS文件。另外，变量和mixins都可以在主文件中引用。

　　在一次import中，可以导入多个文件，之间使用逗号隔开。例如：　　

@import "rounded-corners", "text-shadow"

　　可以引入变量：

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");

　　编译后：　　

@import url("http://fonts.googleapis.com/css?family=Droid+Sans");