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"

檔名要取做_function.scss，有底線的檔案不會被轉存成CSS

---

影片在此~

---