# SCSS學習重點整理 2020-04-22

###### tags: `SCSS` `程式筆記`

---

以下為觀看 [ Alex 宅幹嘛 ] 👨‍💻從 CSS 到 SASS (SCSS) 超入門觀念引導 的心得筆記

## SCSS
學習重點：
* 變數寫在最前面，方便管理
* %是專門繼承的變數樣式
* 可以寫函式、做計算

### 變數與槽狀結構

$width: 100%   //這是變數寫法
$buttonNumber: 6;

%col {

}

.container {
    >.col {
        width: 300px;
        color: #333;;
        //寫>指定位置比較精準，不會所有子層都套用，可以增進效能
    }
    >ul {
        font-size: 0px;
    }
    li {
        display: inline-block;
        font-size: 16px;
        width: $width / $buttonNumber;  // Css呈現為數字，提升效能
        width: calc(100% / 6);  //Css要計算，會拖慢網頁速度
    }
}

// 這是在SCSS寫註解的推薦方式
/*這樣寫註解會一起轉譯進CSS裡面，增加Css的大小*/

@extend .col  //樣式會全部寫在一起，col也會呈現在樣式列表

@extend %col  //專門用來繼承的樣式，不會出現在Css裡面

### 在SCSS上寫function()
* @function+@return(倍數)

$baseSize: 12px;      //基本文字大小
$baseLineSize: 10px;  //基本行高大小
$sizeLevel: 4px;       //增加的文字大小
$paddingLevel: 1.2;    //增加的行高

@function font($level: 0) {
  @if $level < 0 {
    $level: 0;
  }
  @return $baseSize + $sizeLevel * round($level);
  //回傳 基本文字大小 + 增加的文字大小 *取整數（level）
}

@function rhythm($size) {
  @return ceil($size * $paddingLevel / $baseLineSize) * $baseLineSize;
  //       ceil( size * 增加的行高 / 基本行高大小) * 基本行高大小
  //Math.ceil() 函式會回傳大於等於所給數字的最小整數。(無條件進位)
}

@mixin font($level: 1, $line-height: auto) {
  $size: font($level);
  $line: rhythm($size);

  font-size: $size;
  @if $line-height == auto or $line-height < $line {
    line-height: $line;
  } @else {
    line-height: $line-height;
  }
}

@function line($count: 1, $baseLineHeight: 10px) {
  @return $baseLineHeight * $count;
}

@for $i from 0 through 5{
  .level#{$i}{
    @include font($i);
    margin: line($i/2) auto;
  }
}


---

### @mixin的用法
* @mixin像是大補包，但是很方便
* 產生的Css樣式會分開，不會合併樣式
#### mixin跟extend差別
* extend會把樣式打包在一起

//使用到樣式上面
@mixin aButton(){
    text-decoration: none;
    display: block;
}
.aaa {
    @include aButton();
    font-size: font(5)
    line-height: rhythm(font(5));
}

### @import
* 可以引入別的SCSS檔案

@import "function"

檔名要取做<span class="code1">_function.scss</span>，有底線的檔案不會被轉存成CSS

---
影片在此~
{%youtube mzuKtTuimEE%}

---
<span class="code1"></span>
<style>
h2 {
color: #2383B8;
}
h3 {
color: #1AA340;
}
h6 {
color: white;
background-color: #2383B8;
padding:8px;
}

.code1 {
padding: 2px 4px;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
font-family:'Fira Code';
}
.code {
padding: 2px 4px;
font-size: 110%;
font-family:'Fira Code';
}
</style>