css: scss.sass

CSS: scss. sass
scss和sass是具有巢狀結構的css，讓程式碼更易於管理。

---

目錄:

• scss 與 css 的相容性:
• 優點1. 巢狀結構
• 優點2. 自訂變數
• 相關連結

---

scss. sass

• SCSS 官網: https://sass-lang.com/
• Koala: http://koala-app.com/

scss 與 css 的相容性:

scss必須要轉成css才能被瀏覽器判讀。

• codepan: 在settings設定CSS Preprocessor
• 本機: 使用koala

優點1. 巢狀結構

article {
  background-color: lightgray;
  padding: 25px;
  
  h1 {
  font-size: 2em;
  font-weight: 300;
  color: purple;
  }
  
   p {
  font-size: 1.4em;
  font-weight: 300;
  }
}

優點2. 自訂變數

$background: lightgray; /*設定背景色為灰色*/

article {
  background-color: $background;
  padding: 25px;
  
  h1 {
  font-size: 2em;
  font-weight: 300;
  color: purple;
  }
  
   p {
  font-size: 1.4em;
  font-weight: 300;
  }
}

相關連結

HackMD筆記
CodePen練習