CSS 預處理器:Sass


Posted by ericcch24 on 2020-10-16

  • Sass: 可以在 css 進行類似程式碼的操作,例如變數函式等等,寫完後預處理器會幫忙轉成 css 格式 --- Sass 官網

  • 還有另外兩種常見的預處理器:less, stylus,有一些語法上的差別。

  • Command-line 指令

    • sass --watch input.scss output.css
    • input 的 scss 寫完後轉成 output 的 css
    • --watch 會偵測 scss 的所有改動狀況然後自動 compile,就不用一直輸指令轉換。

Variables

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

轉換後

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

Nesting 巢狀

  • 同一層底下的元素包在一起

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

    轉換後

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

    ### Mixins: 類似 function,也可以傳參數

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(30deg)); }

轉換後

.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

The Indented Syntax

某元素 {} 底下的 & 都表示自己

$primary-color: #333;
div {
  color: color: $primary-color;

  &:hover {
  color: red;
  }
}

轉換後

div {
  color: #333;
}

div:hover {
  color: red;
}

tags: Week13

#week13







Related Posts

SOLID 設計原則筆記

SOLID 設計原則筆記

prettier 和 JSX 特性

prettier 和 JSX 特性

[PySide6]QMainWindow - 功能表

[PySide6]QMainWindow - 功能表


Comments