N1_CSS 預處理器

[FE201]_寫 CSS 好簡單：CSS 預處理器

什麼是 CSS 預處理器？

為什麼要用？CSS 寫起來不像是一個程式語言，如果可以用程式語言的概念寫迴圈等等在裡面，會更方便使用。而 CSS 預處理器就是可以把 CSS 轉換成程式語言的一個翻譯器。

SCSS 簡介：可以去 官網 看一下指令

用 SCSS 比較符合原本 css 的寫法，Sass 則有自己的規則，要習慣一下

基本用法：

1.要怎麼使用 sass 把寫的 scss 作轉換？

先建立一個 style.scss，在裡面寫的 style 經過 sass style.scss s.css 以後，就會多兩個檔案出來。

一個是 s.css，就是從 style.scss 編譯而來的
另一個是s.css.map，如果有 source map，在 debug 的時候瀏覽器會給你原本的資訊。

//  style.scss
$primary-color: #333;

div {
  color: red;
}

2.sass --watch style.scss s.css 自動偵測 style.scss，去改變 s.css 做編譯

根據官方文件，分成以下幾個部份：

1.Variables

可以寫一些變數共用：

//  style.scss
$primary-color: #333;

div {
  color: $primary-color;
}

雖然 css 新標準 variables 可以做到一樣的事，但 sass 的瀏覽器支援度還是比較好

2. Nesting

官網寫得很清單

SCSS SYNTAX
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

compile 完就變成：

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

3. Mixins

有點像是函式的感覺

//  可以在 scss 檔案最上面寫函式
@mixin full() {
  width: 100%;
  height: 100%;
}

//  下面的 css 引入這個函式
.box {
  @include full();
}

//  css complie 以後會長這樣

.box {
  width: 100%;
  height: 100%;
}

4. & 代表自己

可以在 documentation syntax 裡面找資料

div {
  color: $primary-color;

  &:hover{
    color: red;
  }
}

//  compile 完以後
div {
  color: #000;
}
div:hover {
  color: red;
}

SCSS 實戰

把之前報名表單改成 scss

總結：

1.less, stylus 也是一些有名的預處理器

2.可以參考 Lidemy 官網的 結構