SCSS語法 - SassScript - Variables、除減法運算

 

以下要點不打算多做說明，只列出scss語法與結果

一、SassScript

Scss也提供類似程式化的語法給開發者，目地是讓轉CSS時更有彈性。

我們可以下command line的方式來試著驗證程式寫得對不對，

於command line下打入「$sass -i」，進入sass指令模式，如下範例

$ sass -i
>> "Hello, Sassy World!"
"Hello, Sassy World!"
>> 1px + 1px + 1px
3px
>> #777 + #777
#eeeeee
>> #777 + #888
white

 

1、Variables

scss輸入

$my-color:#333;

body {
  color: $my-color;
}

輸出css

body {
  color: #333;
}

 

如果想在各個範圍使用該變數的話，除了將變數宣告在最外層的方法之外，

就是外加!global flag，如下範例

scss輸入

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

#sidebar {
  width: $width;
}

輸出css

#main {
  width: 5em;
}

#sidebar {
  width: 5em;
}

 

2、除法運算

SCSS支援除法運算，但是在特定情形下才會被翻成除法，

滿足以上其中一個條件即可，

a、如果「/」符號包含著一個變數或是function的回傳值，則「/」符號被翻成除法

p {
    $width: 1000px;
    width: $width/2;    
    width: round(1.5)/2;
}

p {
    $font-size: 12px;
    $line-height: 30px;
    font: #{$font-size}/#{$line-height}; //注意，使用#{}起來的變數被視為plain css
}

b、如果「/」符號外被括號所括起來，則「/」符號被翻成除法，但不包含外圍被括號所括起來的List

p {
    height: (500px/2);
}

p {
    font: (italic bold 10px/8px); //不被視為除法
}

c、如果「/」符號和其他運算式所結合，則「/」符號被翻成除法

p {
    margin-left: 5px + 8px/2px;
}

 

3、減法運算

減法運算應用於屬性值裡基本上都很安全，但以下幾個狀況則不被視別減法運算

a、被視為負數

p {
    width: -100px;
}

b、被視為identifier

p {
    font-weight: 100;
}

 

4、字串可以使用「+」來組合字串

scss輸入

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

輸出css

p:before {
  content: "Foo Bar";
  font-family: sans-serif;
}

 

5、顏色也可以拿來做運算

 

6、Variable Defaults

scss輸入

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
    content: $content;
    new-content: $new_content;
}

輸出css

#main {
  content: "First content";
  new-content: "First time reference";
}

如上範例，加上「!default」修飾詞時表示，該變數值沒被指定時則使用該預設值。

有含「!default」修飾詞的變數與不含「!default」修飾詞的變數誰先宣告並沒有先後順序之分。