---
# 7.0-PUG +SASS + postcss
---
# 7.0-PUG +SASS + postcss

## 初始化
npm install -g pug-cli
(記得這是方便未來不要初始化，也不要帶到git裡，換電腦記得用回來)
https://github.com/pugjs/pug/blob/master/README.md

## 設定輸出指令
pug pug -w -P -o ./
(取pug資料夾轉html,放到當前跟目錄下)

[pug 基礎語法](https://rogeraabbccdd.github.io/F2E-book/views/ch31.html#%E5%9F%BA%E6%9C%AC%E8%AA%9E%E6%B3%95)

[pug 進階語法](https://www.shirohana.me/blog/articles/2020-mastery-pug-template-engine/)


---
如果要把複製的html轉pug
操作方式:
選好範圍=>F1 => 打html2pug=>點擊後自動轉換

---

# SASS
## 初始化
npm i -g sass
## 相關插件

即可有下方功能

## 設定輸出指令
sass sass:css -w (會自動建立到css資料夾)
到設定添加這段 以後不用打上面這行

"liveSassCompile.settings.formats": [
  {
    "format": "expanded",
    "extensionName": ".css",
    "savePath": "~/../css"
  },
  {
    "format": "compressed",
    "extensionName": ".min.css",
    "savePath": "~/../dist"
  }
],
"liveSassCompile.settings.excludeList": ["/**/node_modules/**", "/.vscode/**"],
"liveSassCompile.settings.generateMap": false,
"liveSassCompile.settings.autoprefix": ["> 1%", "last 2 versions"],


---
# scss
## 基本介紹

1. 與css兼容
2. $變數名: css內容 !default(沒有設定過此變數，再套用此)
!記得:後方要空格 color: black
4. 變數有作用域
5. _ 跟 - 一樣
6. 嵌套 (不建議超過3)
7. &佔位符代表父層Ex: &hover

#id{
    div{
        h1
        }
        
    }

進階用法

---
8. .

// 變數運算
對比calc，sass直接出現值 
//  $變數 5px=5(所以可運算)
$number==1
$px = 5px
(運算記得符號要空白，單位會被抵銷)
$sumMinus = $px + $number - 1px
$multiply = 50px * $number
$division = ($px / 5)
// 亂數
$number:random(3)  (1~3)
//     IF
@if($number==1){
color: $ok
}@else if($number==2){
color: green
}@else {
color: green
}
//    AND OR 
$t = 'ttt'
$red = #777
@if($t=='ttt' and $red == #777 or false){
color: $ok
}
//    > <  (放行內不用@ 特殊用法)
$width: 20px;
border: if($width>20px,$width black solid,1px red solid)

7. for / each

// 不建議class名是值，不然改了值 名稱就對不太上，這時建議用map

//    for 分through(含尾) / to(不含尾)
@for($i from 1 through 5){
    // 插值語法 #{變數甚至運算式}
 .through-#{$i}{
 width: 50px*$i;
 }
}

8. 進階運用

類陣列

map :類物件 (配each)

相關功能:
nth(list,index):類[](從1開始 )
index(list,item):類IndexOf
length(list)

// 可代入陣列
@for $i from through length($list){
    .bg-#{nth($list,$i)}{
    background-color: nth($list,$i)
    }
}
// 可換成each in 類似 for of 
each $v in $list{
    .bg#{$v}{
     background-color:  $v
    }
}

//  map-keys
// https://changtsuiling.gitbooks.io/sass/content/chapter8/3-18-sass-mapsde-han-6578-map-keys-map.html

9. 繼承: .bb{}/ %bb{}(不顯示本身) @extend .bb
10. function

@function randFont(){
  $result:random(3);
  @return $result + px
  };
.t{
  width: randFont()
}
// 指定預設
@function randFont($font-size:10px,$width:100px,){
  @return $font-size + $width
  };

[mixin + RWD](https://awdr74100.github.io/2020-05-30-scss-mixin-include/)


## 其他功能



map-merge

$originalmap : map-merge($originalmap,$addMap)
---

## 組件

[partials](https://awdr74100.github.io/2020-06-05-scss-import-partials/)

# postcss

1. npm init -y
npm i postcss
npm i -D @fullhuman/postcss-purgecss postcss-cli

2. 新增: postcss.config.js
內容:

const purgecss = require('@fullhuman/postcss-purgecss')
module.exports = {
  plugins: [
    purgecss({
      content: ['./**/*.html']
    })
  ]
}

3. package.json增加快捷:

  "scripts": {
    "postcss": "postcss ./css/ -r ./css/",
    "postcssmin": "postcss ./dist/ -r ./dist/"
  },

## bootstrap scss