函数

圆括号 (Parentheses)

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

p {
  width: 1em + (2em * 3);
}

编译为

p {
  width: 7em;
}

函数 (Functions)

SassScript 定义了多种函数，有些甚至可以通过普通的 CSS 语句调用：

p {
  color: hsl(0, 100%, 50%);
}

编译为

p {
  color: #ff0000;
}

关键词参数 (Keyword Arguments)

Sass 函数允许使用关键词参数 (keyword arguments)，上面的例子也可以写成：

p {
  color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);  // 通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色。
}

虽然不够简明，但阅读方便。关键词参数给函数提供了更灵活的接口，以及容易调用的参数；关键词参数可以打乱顺序，如果使用默认值也可以省缺，另外，参数名被视为变量名，下划线、短横线可以互换使用。

插值语句 #{} (Interpolation: #{})

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

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

编译为

p.foo {
  border-color: blue;
}

#{} 插值语句也可以在属性值中插入 SassScript，多数情况下，这样可能还不如使用变量方便，但是使用 #{} 可以避免 Sass 运行运算表达式，直接编译 CSS。

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

编译为

p {
  font: 12px/30px;
}

& in SassScript

&指当前父选择器

.foo.bar .baz.bang, .bip.qux {
  $selector: &;
}

如下，当没有父选择器时&为null，此法可用来检测父选择器是否存在；

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

变量定义 !default (Variable Defaults: !default)

通过在变量结尾添加 !default ，给一个未通过 !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";
}

变量值为 null 时，将被视为未赋值

$content: null;
$content: "Non-null content" !default;

#main {
  content: $content;
}

编译为

#main {
  content: "Non-null content";
}