SASS教學-環境、寫法篇

參考資料：
SaSS 課程 講義補充
Sass/SCSS 簡明入門教學

本章作業練習：
題目

---

簡介：

Sass 是一個 CSS 預處理器，而它有兩種撰寫的風格
1.一個是 SASS
2.另一個就是 SCSS(較常使用這種寫法，原因是跟原本css寫法類似，較為直覺好懂)

Sass常見編譯方式主要有下面三種
1.軟體編譯 EX：prepros
2.gulp、webpack 前端任務/打包工具
3.編輯器內建的插件

接下來，就讓我介紹軟體編譯、Vscode內建的插件使用方式

今天將介紹sublime、Vscode兩種編輯器處理方式
一、編輯器：sublime text3
1.為了讓 Sublime Text 3 支援 Sass、Scss 語法，請安裝 Sass、Scss Plugin

補充：使用sublime text3編輯器撰寫方式

1.將all.scss檔案開啟 放置左邊
2.將以編譯好的all.css放置右邊(方便同時觀看)

2.環境建置篇：
先下載Prepos 前端軟體-Prepos介紹
安裝完成後，請將資料夾丟進prepos內 如下圖所示
接著，新增一個資料夾Sass，並在裡面放進一隻.scss檔案
如果畫面右下角有出現success就表示有成功喽~

二、編輯器Vscode
在vscode中新增一個xxx.scss檔案，並記得按下左下角watching即可及時編譯喔

SASS、 SCSS語法撰寫

SCSS語法

將子階層內容直接寫進父元素中 如下 codepen 練習連結
Tips：&連結詞使用，可以連接上一層

.menu {
  li {
    a {
      color: red;
      text-decoration: none;
      font-size: 30px;
      &:hover {
        color: grey;
      }
    }
  }
}

如此，編譯結果為如下

SASS語法撰寫

codepen練習
備註：1.不用括號和逗點 2.每往下一個階層都需要兩個空白或是一個tab

.menu
  li
    a
      font-size: 30px
      text-decoration: none
      
.second
  font-size: 40px
  color: red

記得:後要空一個(沒有空的話，會顯示編譯成功，但程式碼不會出現)
成功的話，會出現下圖

結論：

1.

2.編譯錯誤記得去prepos log中看錯誤在哪~~
3.如果CSS後面沒加分號;會編譯錯誤
4.CSS巢狀不要超過四層(避免網頁渲染效能有所影響)

//巢狀指的就是下面撰寫內容
.menu {
  li {
    a {
      color: red;
      text-decoration: none;
      font-size: 30px;
      &:hover {
        color: grey;
      }
    }
  }
}