# [Scss] 基本應用
###### tags: `CSS`

推薦文件(首選)：
https://frankknow.com/sass-tutorial/

參考文件：
https://blog.kdchang.cc/2016/10/11/sass-scss-tutorial-introduction/

* 安裝步驟：vscode內部下載live sass並開啟資料夾進行載入
* 父子元素相依語法，將同父元素的程式碼，放入同一階層中
* @變數：語意化命名變數
* import統一管理：經由多個子檔案構成一包主要的scss資料，注意代入順序，上至下渲染
* 宣告變數公式@mixin + 呼叫@include
* 邁向mixin高階用法，代入參數(可多筆)
* 使用Mixin調整響應式大小，增加可讀性
放置多個尺寸大小，容易閱讀方便管理
* BE命名管理，提升在html裡的可讀性架構

### 1. Nesting：降低父元素重複性

[網資](https://blog.kdchang.cc/2016/10/11/sass-scss-tutorial-introduction/)

.parent {
  color: blue;
  
  .child {
    font-size: 12px;
  }
  
}

.parent {
  color: blue;
}

.parent .child {
    font-size: 12px;
}

### 2. 在 Nesting 中不僅只有 child selectors 可以使用，還可以使用在相同的 Properties 上：

.parent {
  font : {
    family: Roboto, sans-serif;
    size: 12px;
    decoration: none;
  }
}

.parent {
  font-family: Roboto, sans-serif;
  font-size: 12px;
  font-decoration: none;
}

### 3. Mixins：降低 pseudo 元素撰寫的重複性，如：::before、::after、:hover，在 Sass 中使用 & 代表父元素

.notecard{ 
  &:hover{
      @include transform (rotatey(-180deg));  
    }
  }

.notecard:hover {
  transform: rotatey(-180deg);
}

### 4. 重用群組的 CSS，例如跨瀏覽器的 prefix，使用 @include 加入群組

* 新增一組@mixin群組，在根目錄使用@include套用

@mixin backface-visibility {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
}
.notecard {
  .front, .back {
    width: 100%;
    height: 100%;
    position: absolute;

    @include backface_visibility;
  }
}

.notecard .front, .notecard .back {
  width: 100%;
  height: 100%;
  position: absolute;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden; 
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
}

### 5.使用@extend加入群組

* %clearfix 搭配 @extend
* @mixin 搭配 ＠include

### 6.善用符號(&)來定義

在巢狀結構語法裡，就需要加入與符號(&)來定義，代表是黏在一起中間沒有空格的，例如以下的範例:

// scss

.parent {
  &:hover {
  }
  //在此父層的指定other class元素
  &.other-class {
  }
}