繼上一篇講解scss的安裝與執行，今天終於要進入語法的單元啦!

SCSS的語法

嵌套規則(Nested Rules)

使得父元件無須一直重複編寫，加快開發流程。

/** 在scss檔  **/
#main {
    width: 300px;
    background-color: yellow;
    height: 100px;
    .red-sq{
        background-color: red;

    }
}

/** 編譯成css後  **/
#main {
  width: 300px;
  background-color: yellow;
  height: 100px;
}
#main .red-sq {
  background-color: red;
}

除了在選擇器上，向font及background等屬性常常需要輸入重複的單字，如font-family、font-size、font-weight等，也可以套用嵌套語法，不過要記得加上** :** 在font或background後面。

/** 在scss檔  **/
.main {
    font: {     
        size: 24px;
        weight: bold;
    }
}

/** 編譯成css後 **/
.main {
    font-size: 24pxm;
    font-weight: bold;
}

引用父選擇器 &

這個語法和嵌套長得有點像，但&後面通常是接選擇器或偽元素

/** 在scss檔  **/
.big-button{
&:hover, &:active, &:focus {
            color: #000;
            outline: none;
            text-decoration: none !important;
        }
}

/** 編譯成css後 **/
.big-button:hover, .big-button:active , .big-button:focus{
            color: #000;
            outline: none;
            text-decoration: none !important;
}

也可以當嵌套規則在用

#main {
    width: 300px;
    background-color: yellow;
    height: 100px;
    &.red-sq{
        background-color: red;

    }
}

變數(variable)

在SCSS語法可以用$來宣告編數，對於需要有統一樣式或規格的大型專案非常好用，而當統一的顏色或規格需要調整時只需追朔宣告的地方並更改即可。
使用$宣告變數分為7種型別

• 數字（如：0.5, 1, 20px）
• 字串，帶引號和不帶引號（如："foo", 'foo', foo）
• 顏色（如：red, #6C6C6C, rgba(0, 0, 0, 0.5)）
• 布林值（如： true, false）
• null
• 值列表（list），用空格或逗號分開（如：2em 1em 0 1em、 Helvetica, Arial）
• maps：從一個值映射到另一個（如：(key1: value1, key2: value2)）

用法如下

$btn-red-1:#ff1d4e;
$bigsize:24px;

.btn{
background-color:$btn-red-1;
font-size:$bigsize;
width:80px;
height:60px;
}