最近咔咔建站运用sass的写法，初入门槛，收集一些语法变量等的规则，参考一二

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

Sass特点：

·      对css完全兼容

·      语言扩展，例如变量、嵌套、mixins

·      拥有大量函数，可以用来操作颜色及其他属性值

·      高级特性如control directives

·      可以自定义格式化输出

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

//scss syntax div{

  color: #ccc;

}

//sass syntaxdiv

  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 {

    color: #aaa; }

3. 计算

3.1 变量

sass中加入了变量，变量以美元符号$开头，例如：

$gray:#ccc;

并使用$来引用变量

div{

  color: $gray;}

如果变量在选择器外面定义，则属于全局变量，如果在选择器内部定义，则只能在该选择器作用范围内使用。当然也可以使用!global来将其声明为全局变量：

.global{

  $blue:#00f !global;}

3.2 计算

SassScript支持对数值进行算数操作，包括加(+)、减(-)、乘(*)、除(/)、取余(%)。算数操作可以保留单位，比如下面两种加法都是合法的：

.operation{

  height:1+1px;

  width:1px+1px;}

将编译成

.operation {

  height: 2px;

  width: 2px; }

但是需要注意的是对于不同单位的数值（如px和em）不能进行算数操作。

对于乘法来说，如果两个数值具有相同的单位，相乘时会生成单位的平方，但是在css中单位的平方是不允许的。

而对于除法来说，由于css中已经存在除法表达式，如10px/2px，这种表达式在输出为css不会被计算成结果，除非由括号包围，正确的使用方式是10px/2。

对于减法，使用负号(-)时需要在两边有空格。

除此之外，算数操作中也可以使用变量。

.operation{

   $width:5px;

   width: $width*2;

   height:2*2px;

   font-size: 5px - 1px;

   margin-bottom: (10px/5);

   margin-left: (10px/5px);

   margin-right: 10px/5px;

   margin-top: 2px+10px/5px;}

将被编译成

.operation {

  width: 10px;

  height: 4px;

  font-size: 4px;

  margin-bottom: 2px;

  margin-left: 2;

  margin-right: 10px/5px;

  margin-top: 4px; }

对于颜色值，rgb三个值是分开计算的，例如：

.color{

  color: #001122+#002244;}

将被计算成

.color {

  color: #003366; }

4. 表达式与函数

4.1 条件语句

条件语句以@if、@else if、@else为关键字

div {

  @if ($width>2px) {

    height: 5px;

  } @else {

    height: 10px;

  }

}

将被编译成

div {

  height: 5px; }

4.2 循环语句

循环语句有三种形式：@for、@each、@while，@for和@while与普通循环相同，@each用于遍历list和map。

@for

@for有两种形式，分别是from (start) through (end)和from (start) to (end)，其区别是前者的范围是从start到end，后者的范围是从start到end-1

@for $var from 1 to 3{

  .item-#{$var}{

    width: 2px*$var;

  }

}

将被编译成

.item-1 {

  width: 2px; }

.item-2 {

  width: 4px; }

@while

$var:3;

@while $var>0{

  $var : $var - 1;

  .item-#{$var}{

    width:$var px;

  }

}

将被编译成

.item-2 {

  width: 2 px; }

.item-1 {

  width: 1 px; }

.item-0 {

  width: 0 px; }

@each

@each可用于遍历<list or map>中的变量

//遍历list@each $var in main, sider, foot {

  .#{$var}-item {

    color: #ccc;

  }

}

将被编译成

.main-item {

  color: #ccc; }

.sider-item {

  color: #ccc; }

.foot-item {

  color: #ccc; }

//遍历map@each $key, $value in (main:5px, sider:10px, foot:5px) {

  .#{$key} {

    height: $value;

  }

}

将被编译成

.main {

  height: 5px; }

.sider {

  height: 10px; }

.foot {

  height: 5px; }

4.3 函数

sass中使用@function定义函数，使用@return返回值，例如：

@function my_add($var1,$var2){

  @return $var1 + $var2;

}

div{

  width: my_add(1px,2px);}

将被编译成

div {

  width: 3px; }

需要注意的是：函数定义名称中的下划线(_)和横线(-)是等同的，即上面的使用my-add(1px,2px)也是可以的。

5. 样式重用

5.1 @import

使用@import可以导入其他的sass文件，例如想要导入一个foo.scss文件，由于导入的默认后缀名为.scss和.sass，因此下面两中方式均可：

@import "foo.scss";

或

@import "foo";

虽然@import一般都在文档的头部使用，但也可以在css规则中使用，例如

在一个for-import.scss文件中包含

.im-test{

  height: 10px;}

使用

div{

  @import "for-import";

}

将被编译成

div .im-test {

  height: 10px; }

5.2 @extend

使用@extend可以继承另一个选择器的属性，例如happy类定义了基本属性，而very-happy类在具有happy类属性的同时还增加其他属性：

.happy{

  height: 50px;

  width: 50px;

}

.very-happy{

  @extend .happy;

  background-color: #5bc0de;

}

将被编译成

.happy, .very-happy {

  height: 50px;

  width: 50px; }

.very-happy {

  background-color: #5bc0de; }

@extend的实际原理是所有继承的选择器出现的地方都应用当前选择器，例如下面所示，.happy下面的div、 hover属性都会被.very-happy继承：

.happy{

  height: 50px;

  width: 50px;

}.happy div{

  border: 1px;

}.happy:hover{

  color: #de1d18;

}.very-happy{

  @extend .happy;

  background-color: #5bc0de;

}

将被编译成

.happy, .very-happy {

  height: 50px;

  width: 50px; }

.happy div, .very-happy div {

  border: 1px; }

.happy:hover, .very-happy:hover {

  color: #de1d18; }

.very-happy {

  background-color: #5bc0de; }

此外@extend也支持多重继承、链式继承，在这里不作多述。

5.3 @mixin

@mixin-->