markdown SCSS

Posted 2021-05-05

## 設定

`.vscode`資料夾下，新增`settings.json`

#### 內容

```json
{
  "liveSassCompile.settings.formats": [
    // 用於 development
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "/style"
    },
    // 用於 production
    {
      "format": "compressed",
      "extensionName": ".min.css",
      "savePath": "/dist/css"
    }
  ],
  // compile時，產生map檔案
  "liveSassCompile.settings.generateMap": false,
  // 排除被Compile的檔案
  "liveSassCompile.settings.excludeList": ["**/node_modules/**", ".vscode/**"],
  // 自動轉換瀏覽器版本，post css
  "liveSassCompile.settings.autoprefix": ["> 1%", "last 2 versions"]
}
```

## 介紹

1.  新增`scss`資料夾，放置相關 scss 檔案

- #### 巢狀

```scss
.tabList {
  > header {
    > ul {
      margin: 0;
      padding: 0;
      list-style: none;
      font-size: 0px;
    }
    li {
      display: inline-block;
      font-size: 16px;
      > a {
        height: 20px;
        line-height: 20px;
        text-decoration: none;
      }
    }
  }
}
```

Compile

```css
html {
  margin: 0;
  padding: 0;
}

.tabList > header > ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0px;
}

.tabList > header li {
  display: inline-block;
  font-size: 16px;
}

.tabList > header li > a {
  height: 20px;
  line-height: 20px;
  text-decoration: none;
}
```

- #### 變數

```scss
$width: 100%;
$buttonNumber: 6;

// 使用
width: $width / $buttonNumber;
```

- #### 繼承

```scss
$width: 100%;

// 使用 % 宣告
// 共用一份
%aButton {
  display: block;
  width: $width;
}

// 使用 @extend關鍵字
a {
  @extend %aButton;
}
b {
  @extend %aButton;
}
c {
  @extend %aButton;
}
```

Compile

```css
.aaa,
.bbb,
.ccb {
  display: block;
  width: 100%;
}
```

- #### Function

```scss
// 使用 @ 宣告和回傳
// 參數使用 $ 符號，冒號後接著預設值
@function calcWidth($liWidth: 100%, $count: 1) {
  @return $liWidth/$count;
}

// 直接使用，不用加上 @
li {
  width: calcWidth($width, $buttonNumber);
}
```

- #### mixin

1.  和繼承功能一樣，屬於被繼承的樣式
1.  被繼承幾次，就會產生幾份
1.  大部分都把變數和 function，在中一起實作

```scss
@mixin aButton {
  display: block;
  width: $width;
}
// 使用 @include關鍵字
.aa {
  @include aButton;
}

.bb {
  @include aButton;
}

.cc {
  @include aButton;
}
```

Compile

```css
.aa {
  display: block;
  width: 100%;
}

.bb {
  display: block;
  width: 100%;
}

.cc {
  display: block;
  width: 100%;
}
```

- #### 範例實作

```scss
$baseSize: 12px;
$baseLineSize: 10px;
$sizeLevel: 4px;
$paddingLevel: 1.2;

// 計算font-size
@function font($level: 0) {
  @if $level < 0 {
    $level: 0;
  }
  @return $baseSize + $sizeLevel * round($level);
}

// 計算字和字的行高
// 依據font-size的大小，自動調整行高，因乘上 $baseLineSize，都會是10的倍數
@function rhythm($size) {
  // ceil: 無條件進位
  @return ceil($size * $paddingLevel / $baseLineSize) * $baseLineSize;
}

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

// 取得font-size和line-height
@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;
  }
}

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

Compile

```css
.level0 {
  font-size: 12px;
  line-height: 20px;
  margin: 0px auto;
}

.level1 {
  font-size: 16px;
  line-height: 20px;
  margin: 5px auto;
}

.level2 {
  font-size: 20px;
  line-height: 30px;
  margin: 10px auto;
}

.level3 {
  font-size: 24px;
  line-height: 30px;
  margin: 15px auto;
}

.level4 {
  font-size: 28px;
  line-height: 40px;
  margin: 20px auto;
}

.level5 {
  font-size: 32px;
  line-height: 40px;
  margin: 25px auto;
}
```

結果

https://codepen.io/achen224/pen/aKKgwb

- #### 其他
  - 引用其他的`scss`檔案
  1.  新增一個有`_`的 scss 檔，如 : \__function.scss_
  ```scss
  @import 'function';
  ```