主要教巢狀跟變數

監視scss資料夾 放到css 在目錄下指令

 sass --watch scss:css

會立即編譯至css檔

和css的差別

1.sass 有省略 {} 不用{}; ps.scss 有加回來{} 方便閱讀

2.sass不用; 作結尾

3.巢狀結構

上方scss寫法 下方為css

.header {
    color: red;
    a {
        width: 100px;
    }
}

.header {
  color: red;
}

.header a {
  width: 100px;
}

其他文章補充

巢狀語法可以使用明確的階層定義，這種結構在CSS中很常見，例如像下面的選單或清單項目的風格定義:

// scss
ul {
  list-style: none;

  li {
    display: inline-block;
    padding: 15px;

    a {
      color: #444;
      font-size: 16px;
      text-decoration: none;
    }
  }
}

上面的內容會編譯為下面的CSS內容:

/* css */
ul {
  list-style: none;
}

ul li {
  display: inline-block;
  padding: 15px;
}

ul li a {
  color: #444;
  font-size: 16px;
  text-decoration: none;
}

因為CSS中的巢狀結構會有兩種情況，一種是指包含在某個DOM元素之內的，例如上面範例的ul li a。而另一種則是指同個DOM元素的但不同類別，例如ul.mylist或a:hover(偽類)。有空格就代表是第一種巢狀的結構，也就是上面的原本的巢狀定義方式。

第二種巢狀結構是沒有空格，接著在一起的CSS定義，這時在巢狀結構語法裡，就需要加入與符號(&)來定義，代表是黏在一起中間沒有空格的，例如以下的範例:

// scss
.parent{
  &:hover{}
  &.other-class{}
}

上面的內容會編譯為下面的CSS內容:

/* CSS */
.parent:hover{}
.parent.other-class{}

風格建議: 如果你有像h1.title或li.mylist之類的CSS宣告，不論裡面的樣式有多簡單，都應該在SCSS檔案中都要列成巢狀結構。

4.可設定變數 下方套用 上方為scss 下方為編譯過的css

$color1 : #FD1B3F;
$color2 : #F7E02A;
$color3 : #6AC217;
$color4 : #403ED3;
$color5 : #ffffff;
$color6 : #000000;

.header {
    color: red;
    a {
        width: 100px;
    }
}


a{
background: $color6;
color:$color5;
}

.header {
  color: red; }
  .header a {
    width: 100px; }

a {
  background: #000000;
  color: #ffffff; }

利用變數可把重複的地方模組化

其他文章補充撰寫時的建議:

對於會套用到整個網站的每個顏色、字體建議都先定義成變數。

撰寫時的建議: 不要使用像red、blue的英文字詞來指定顏色，而是要用16進位碼來定義，例如red應該寫成#ff0000。

撰寫時的建議: 在CSS類別中定義時，按照英文字元A-Za-z來排列其中的CSS樣式定義。

變數可以再進行作加減乘除餘(+-*/%)運算，最特別的是字串與顏色色碼也可以進行運算。

//scss
$_num: 5px;

.container {
  color: $color-pink / 2;
  margin: $_num * 2 $_num;
}