CSS 預處理器：Sass

• 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