在CSS属性的基础.上Sass提供了-些名为SassScript的新功能，SassScript可作用于任何属性,允许属性使用变量、算数运算等额外功能.

1.注释

Sass支持标准的CSS多行注释/* */ ,以及单行注释// ,前者会被
完整输出到编译后的CSS文件中,而后者则不会

//单行注释,不会被编译出来
/*多行注释*/

2.定义变量

变量以美元符号开头,赋值方法与CSS属性的写法一样
scss文件：

$color:#ccc;
$width:300px;
body{
    color: $color;
}

会编译成如下css文件：

body {
  color: #ccc;
}

3.变量的作用域

Sass中变量支持块级作用域,嵌套规则内定义的变量只能在嵌套规则内使用(局部变量) ,不在嵌套规则内定义的变量则可在任何地方使用(全局变量)
.scss文件：

$color:#ccc;//定义全局变量
$width:300px;
body{
    color: $color;
    div{
        $color:red;//定义局部变量
        color: $color;
    }
}

编译后，.css文件

body {
  color: #ccc;
}

body div {
  color: red;
}

通过! global声明,将局部变量转换为全局变量
语法：

div{
  $color:red!global;
}

4.数据类型

SassScript支持6种主要的数据类型

数字，1, 2, 13, 10px
字符串,有引号字符串与无引号字符串，"foo", 'bar', baz
颜色，blue, #04a3f9, rgba(255,0,0,0.5)
布尔型, true, false
空值，null
数组(list)，用空格或逗号作分隔符, 1.5em 1em 0 2em, Helvetica,Arial, sans-serif
maps, 相当于JavaScript的object , (key1: value1, key2: value2)
.scss文件

$color:#ccc #fff #000;
body{
    color: nth($color,1);
    div{
        color:nth($color, 2);
    }
}

编译后.css文件

body {
  color: #ccc;
}

body div {
  color: #fff;
}

5.Sass基本特性-运算

程序中的运算是常见的一-件事情,但在CSS中能做运算的,到目前为止仅有calc()函数可行。但在Sass中,运算只是其基本特性之一
Sass运算包括
数字运算: +.-.*,/, %
颜色值运算
字符串运算
布尔运算:支持布尔型的and、or 、not 运算
数组运算:数组不支持任何运算方式,只能使用list functions控制
.scss文件

//加法
div{ width:(100px +20px); }
//减法
div{ width:(100px-20px); }
//乘法
div{ width:(100px * 2); }
//除法
div{ width:(100px/12); }

$contentwidth:200px;
$borderwidth:20px;
.box{
    width:($contentwidth+ $borderwidth)*2;
}

编译后.css文件：

div {
  width: 120px;
}

div {
  width: 80px;
}

div {
  width: 200px;
}

div {
  width: 8.33333px;
}
.box {
  width: 440px;
}

插值语句

使用CSS预处理器语言的一个主要原因是想使用Sass获得一个更好的结构体系
通过#{}插值语句可以在选择器或属性名中使用变量。
.scss文件:

$name:"box";
$attrname:"border";
p.#{$name}{
    content: name+"zhangsan";
    #{$attrname}:1px solide black
}