sass定義變量使用$符號(hào)。

$width: 5em;
#main {
  width: $width;
}

變量支持塊級(jí)作用域，嵌套規(guī)則內(nèi)定義的變量只能在嵌套規(guī)則內(nèi)使用（局部變量），不在嵌套規(guī)則內(nèi)定義的變量則可在任何地方使用（全局變量）。將局部變量轉(zhuǎn)換為全局變量可以添加 !global 聲明：

#main {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}

編譯后

#main {
  width: 5em;
}

#sidebar {
  width: 5em;
}

SassScript 支持 6 種主要的數(shù)據(jù)類型：

• 數(shù)字，1, 2, 13, 10px

• 字符串，有引號(hào)字符串與無引號(hào)字符串，"foo", 'bar', baz

• 顏色，blue, #04a3f9, rgba(255,0,0,0.5)

• 布爾型，true, false

• 空值，null

• 數(shù)組 (list)，用空格或逗號(hào)作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif

• maps, 相當(dāng)于 JavaScript 的 object，(key1: value1, key2: value2)

sass運(yùn)算

SassScript 支持?jǐn)?shù)字的加減乘除、取整等運(yùn)算 (+, -, *, /, %)，如果必要會(huì)在不同單位間轉(zhuǎn)換值。

關(guān)系運(yùn)算 <, >, <=, >= 也可用于數(shù)字運(yùn)算，相等運(yùn)算 ==, != 可用于所有數(shù)據(jù)類型。

p {
  font: 10px/8px;             // Plain CSS, no division
  $width: 1000px;
  width: $width/2;            // Uses a variable, does division
  width: round(1.5)/2;        // Uses a function, does division
  height: (500px/2);          // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
}

編譯為

p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px; }

如果需要使用變量，同時(shí)又要確保 / 不做除法運(yùn)算而是完整地編譯到 CSS 文件中，只需要用 #{} 插值語句將變量包裹。

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

編譯為

p {
  font: 12px/30px; }

+ 可用于連接字符串

p {
  cursor: e + -resize;
}

編譯為

p {
  cursor: e-resize; }

混合指令 (Mixin）

混合指令的用法是在 @mixin 后添加名稱與樣式

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

混合也需要包含選擇器和屬性，甚至可以用 & 引用父選擇器：

@mixin clearfix {
  display: inline-block;
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  * html & { height: 1px }
}

9.2. 引用混合樣式 @include 

使用 @include 指令引用混合樣式，格式是在其后添加混合名稱，以及需要的參數(shù)（可選）：

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

編譯為

.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; }

給混合模型定義參數(shù)

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue, 1in); }

編譯為

p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; }