Scss中使用變量、運算

目錄

 

1.$變量

最普遍的用法就是變量，變量以美元符號開頭，賦值方法與 CSS 屬性的寫法一樣

2.數據類型 

3.運算

 

---

1.$變量

最普遍的用法就是變量，變量以美元符號開頭，賦值方法與 CSS 屬性的寫法一樣

$width: 5em;
// 直接使用即調用變量：
#main {
  width: $width;
}

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

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

#sidebar {
  width: $width;
}

編譯為

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

2.數據類型 

支持 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)

3.運算

支持數字的加減乘除、取整等運算 (+, -, *, /, %)

以下三種情況 / 將被視為除法運算符號：

• 如果值，或值的一部分，是變量或者函數的返回值
• 如果值被圓括號包裹
• 如果值是算數表達式的一部分

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; 
}

圓括號可以用來影響運算的順序：

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

編譯為

p {
  width: 7em; 
}

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

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

編譯為

p {
  font: 12px/30px; 
}

 顏色值運算 (Color Operations)

顏色值的運算是分段計算進行的，也就是分別計算紅色，綠色，以及藍色的值：

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 channel（rgba 或 hsla 兩種顏色值），必須擁有相等的 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; 
}

在有引號的文本字符串中使用 #{} 插值語句可以添加動態的值（類似於vue的雙花括號）： 

p:before {
  content: "I ate #{5 + 10} pies!";
}

編譯為

p:before {
  content: "I ate 15 pies!"; }

空的值被視作插入了空字符串：

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

編譯為

p:before {
  content: "I ate pies!"; 
}