Sass语法规则及使用方法

Sass是一种css的扩展，可以使得css的编码更加强大和优雅。sass支持使用变量、条件、循环、嵌套、继承、mixin、函数等强大的功能。

Sass特点：

• 对css完全兼容
• 语言扩展，例如变量、嵌套、mixins
• 拥有大量函数，可以用来操作颜色及其他属性值
• 高级特性如control directives
• 可以自定义格式化输出

sass有两种语法格式，分别以sass和scss为后缀名。scss语法一般css相同，以大括号分隔作用域，以分号来分隔属性；而sass则以缩进分隔作用域，换行分隔属性。

//scss syntax 
div{
  color: #ccc;
}

//sass syntax
div
  color: #ccc

两种语法之间可以用sass-convert命令行来转换

# Convert Sass to SCSS
$ sass-convert style.sass style.scss

# Convert SCSS to Sass
$ sass-convert style.scss style.sass

---

1. 使用Sass

sass是用ruby语言写的，因此在安装sass之前首先需要安装ruby，然后就可以用以下命令安装：

gem insall sass

将sass文件转换为css文件：

sass input.scss output.css

也可以监听sass文件的变化，并实时转换为css：

sass --watch input.scss:output.css

如果想要监听整个文件夹中的内容，也可以使用如下命令：

sass --watch app/sass:public/stylesheets

---

2. css扩展

2.1 嵌套选择器

sass允许嵌套使用css选择器，如下所示：

.out{
  .inner{
    color:#ccc;
  }
}

将被编译成

.out .inner {
  color: #ccc; 

}

2.2 嵌套属性

css中有一大类属性是具有命名空间的，例如border-color、border-radius、border-image等。sass提供了更简洁的方法用于对这类属性的设置：

#main{
  border:{
    color: #ccc;
    radius: 3px;
    width: 1px;
  }
}

将被编译成

#main {
  border-color: #ccc;
  border-radius: 3px;
  border-width: 1px; }

2.3 &：引用父选择器

& 表示对一个父选择器的使用，有时候使用&会使得样式表达更加简介，例如使用hover属性时：

a{
  color:#1b6d85;
  &:hover{
    color: #de1d18;
  }
}

将被编译成

a {
  color: #1b6d85; }
  a:hover {
    color: #de1d18; }

&也能添加后缀来构造新的选择器，例如：

#main{
  color:#ccc;
  &-side{
    color:#aaa;
  }
}

将被编译成

#main {
  color: #ccc; }
  #main-side {