三、SassScript

变量: $

概念：除了普通的CSS属性的语法，Sass 支持一些扩展，称为SassScript。SassScript允许属性使用变量，算术和额外功能。SassScript可以在任何属性值被使用

变量以美元符号开始，赋值跟css属性一样

$width: 5em; 在属性中引用: #main { width: $width; }

变量仅在它定义的选择器嵌套层级的范围内可用（可以理解为块级作用域）

不在任何嵌套选择器内定义的变量则在可任何地方使用（可以理解为全局变量）

定义变量的时候可以后面带上!global标志，在这种情况下，变量在任何地方可见（可以理解为全局变量）

#main { $width: 5em !global; width: $width; } #sidebar { width: $width; } 编译为：
#main { width: 5em; } #sidebar { width: 5em; }

变量名可以互换连字符，例如，如果定义了一个名为 $main-width，您可以使用$ main_width访问它(不建议这么用)

变量类型: $

数字 (例如： 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 ，从一个值映射到另一个 (例如： (key1: value1, key2: value2))

运算

数字运算

SassScript 支持对数字标准的算术运算（加法+，减法 - ，乘法*，除法/和取模%）

除法和 /

CSS允许 / 出现在属性值之间作为分隔数字的方式并且还需要支持除法:

如果该值，或值的任何部分，存储在一个变量中或通过函数返回

如果该值是由括号括起来的，在列表中括号可以被忽略

如果该值被用作另一个算术表达式的一部分

p {
  font: 10px/8px;             // 原生的CSS，不作为除法
  $width: 1000px;
  width: $width/2;            // 使用了变量, 作为除法
  width: round(1.5)/2;        // 使用了函数, 作为除法
  height: (500px/2);          // 使用了括号, 作为除法
  margin-left: 5px + 8px/2px; // 使用了 +, 作为除法
  font: (italic bold 10px/8px); // 在一个列表（list）中，括号可以被忽略。
}
编译为：
        
p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px; 
}

如果纯CSS 的/ 和变量一起使用（即/不作为除法使用），你可以使用#{}插入

p { $font-size: 12px; $line-height: 30px; font: #{$font-size}/#{$line-height}; } 编译为：
p { font: 12px/30px; }

减法，负数，和 -

在CSS和在Sass中 - 有许多不同的意义:

可以是一个减法运算符（比如在5px - 3px中）

可以表示一个负数（比如在-3px中）

可以是一个一元负运算符（比如在-$var中）

是标识符的一部分（比如在font-weight中）

安全的使用-:

减法的时候，在 - 两侧保留空格

当表示一个负数或一元负运算时候，在-前面包含一个空格，后面不加空格

如果在一个空格隔开的list（列表）中，可以将一元负运算使用括号括起来，比如在10px (-$var)中

颜色运算

概念：所有算术运算都支持的颜色值，颜色值的运算是分段进行计算的，也就是，依次计算红（red），绿（green），以及蓝（blue）的成分值

p { color: #010203 + #040506; } 计算 01 + 04 = 05, 02 + 05 = 07, 和 03 + 06 = 09，并且编译为： p { color: #050709; }

数字和颜色值之间的算术运算也是分段

p { color: #010203 * 2; } 计算 01 * 2 = 02, 02 * 2 = 04, 和 03 * 2 = 06，并且编译为： p { color: #020406; }

需要注意的是，包含alpha通道的颜色必须具有相同的alpha值，才能进行颜色运算

p { color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75); } 编译为： p { color: rgba(255, 255, 0, 0.75); }

字符串运算

+运算可用于连接字符串

p { cursor: e + -resize; } 编译为：
p { cursor: e-resize; }

如果带引号的字符串被添加到不带引号的字符串中，那么返回的结果是带引号的字符串

p:before { content: "Foo " + Bar; font-family: sans- + "serif"; } 编译为：
p:before { content: "Foo Bar"; font-family: sans-serif; }

如果一个不带引号的字符串添加到带引号的字符串中，那么返回的结果是一个不带引号的字符串

默认情况下，运算表达式与其他值连用时，用空格做连接符

p { margin: 3px + 4px auto; } 编译为：
p { margin: 7px auto; }

在文本字符串中，#{}式插值可以用来在字符串中放置动态值

p:before { content: "I ate #{5 + 10} pies!"; } 编译为：
p:before { content: "I ate 15 pies!"; }

在字符串插值时，Null值被视为空字符串

$value: null; p:before { content: "I ate #{$value} pies!"; } 编译为：
p:before { content: "I ate pies!"; }

圆括号可以用来影响运算的顺序

p {width: 1em + (2em * 3);}编译为：
p {width: 7em; }

SassScript定义了一些有用的函数，这些函数可以像普通 CSS 函数语法一样调用

访问链接

插值：可以通过 #{} 插值语法在选择器和属性名中使用 SassScript 变量

$name: foo;
$attr: border;
p.#{$name} { #{$attr}-color: blue; } 编译为：
p.foo { border-color: blue; }

插值：使用 #{}意味着靠近它的运算符都将被视为纯CSS

p { $font-size: 12px; $line-height: 30px; font: #{$font-size}/#{$line-height}; } 编译为：
p { font: 12px/30px; }

&：SassScript中的&指向当前父选择器，如果没有父选择器，&的值将是空，这意味着你可以在一个mixin中使用它来检测父选择是否存在

@mixin does-parent-exist {
  @if & {
    &:hover {
      color: red;
    }
  } @else {
    a {
      color: red;
    }
  }
}

如果分配给变量的值后面添加了!default标志，意味着该变量如果已经赋值，那么它不会被重新赋值，如果它尚未赋值，那么它会被赋予新的给定值

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;
#main { content: $content; new-content: $new_content; } 编译为：
#main { content: "First content"; new-content: "First time reference"; }