[筆記] Sass 實戰全攻略 – 1 – 簡介 @地瓜大的飛翔旅程

章節連結

課程對應章節
內容
Sass 實戰全攻略系列文章

當撰寫上千行的程式碼時，模組式的管理 CSS 變成了一個需要的環節。Sass ( Syntactically Awesome Stylesheets ) ，專門將指令碼解析成CSS的手稿語言。它使用縮排來區分代碼塊，並且用換行將不同規則分隔開。你可以像撰寫 JavaScript 一樣來編輯你的 CSS，在使用上更加具有邏輯性。

課程對應章節

Course 1 ～ Course 9 (全部一共有 72 Courses)

請注意：本系列文章為個人對應課程的消化吸收後，所整理出來的內容。換言之，並不一定會包含全部的課程內容，也有可能會添加其他資源來說明。課程連結網址：http://tinyurl.com/ueo7bm2

內容

1.Sass 撰寫完後，靠著編譯器編譯成瀏覽器看的懂得 .css。換言之，在網頁中引入還是 .css，不過撰寫時的附檔名是用 .scss or .sass。
2.Sass 有兩種寫法。Scss 比較接近網頁前端開發者習慣的 css，由 {} 和 ; 作為區隔。Sass 則比較接近後端開發者的語法，用兩個空白或是 tab 來區隔。
3.若你是使用像 sublime 的編輯器，你可以下載 prepos 來即時監聽你的 scss / sass 檔案。它會輸出成一個 all.css 檔。
4.若你是使用如 VS Code，你需要下載 Sass 和 Live Sass Compiler，才能正常編譯和 Highlight 表示。
5.最直覺的差別，就是支援巢狀的寫法，這樣維護上比較容易。
6. “&” 的使用，可以節省重複撰寫的時間，像是寫 :hover 之類的效果時就很好用。

/*Example*/
// .scss
.menu{
  li{
    font-size:24px;
    a{
      color:red;
      &:hover{
        color:pink;
      }
    }
  }
}

// 編譯出的 .css
.menu li {
  font-size: 24px;
}

.menu li a {
  color: red;
}

.menu li a:hover {
  color: pink;
}