<style> body{font-family:"微軟正黑體";}</style>
###### tags: `css` `sass`
# SASS應用
> [time=Sat, Nov 16, 2019 10:54 AM]
---

## sass的好處
* 不需使用 {...}
* 可宣告變數
* 可模組化
* 可使用mixin重工
* 可使用迴圈
* 讓css具有運算能力
* 具有函式庫可以運用

## 基礎應用

// 不需使用{} 
html,body
  width: 100%
  height: 100%
  
//使用宣告變數
$width: 100%
html,body
  width: $width
  
  
//使用變數運算
$width: 100%
html,body
  width: $width*2
  
//使用darken和lighten
$red: #ff5151
background-color: darken($red,10)

## 使用import
* 需要注意先後順序：[參考連結](https://ithelp.ithome.com.tw/articles/10161305)
* 在all.scss 填寫「 @import +’sass檔名’」指令，如下所示：

//新增一個檔案 _test.sass,務必檔名前方加下底線“_”，此檔才不會編譯css，僅做合併用
//主要檔案 all.sass

@import 'text'

// 兩個以上的檔案可以用逗號隔開
@import foundation/code, foundation/lists

// 如果你希望import整個資料夾的話，就在要合併的Sass檔案裡面寫：
@import "library/mixins/*"

// 希望library底下所有的scss檔都@import進來的話
@import "library/**/*"

## 使用mixin模組化

@mixin size($w:100px,$h:100px)
    width: $w
    height: $h

body
    +size(200px) // 只設置一個引數,故w為200px,h仍為100px
    // 或 @include size
    
// -------------------------------------

@mixin font-size($font-size)
    font-size:$font-size + px
    font-size:$font-size / $base-font-size + rem
// 原因是他有 px 與 rem 單位，如果舊瀏覽器不支援 rem 的話，那至少還有 px 可使用，那如果 rem 生效，就會覆蓋 px 的設定，也因如此才會有兩個字型。
// 但以目前實務上來說，瀏覽器都普及支援 rem 了，所以直接使用 rem 也是 ok

### mixin 搭配 RWD

@mixin pad
  @media only screen and (max-width: 768px)
    @content

@mixin mobile
  @media only screen and (max-width: 568px)
    @content

body
  font-size: $font-m
  color: $font-blue
  & p
    @include body-p($font-l,$font-black)
    @include pad
      font-size: $font-l *1.2

// @media only screen and (max-width: 768px) {
//   body p {
//     font-size: 1.8em;
//   }
// }

> [mixin搭配RWD延伸應用](https://ithelp.ithome.com.tw/articles/10132313)
>
## if

> [Part 6. 條件與迴圈](https://yungshenglu.github.io/2017/12/24/SassNotes6/)
## 使用for迴圈

@for $i from 1 through 50
    .test#{$i} // 由i為引數，產出50個

> [30天掌握Sass語法 - (29) @for+random()創造無限可能](https://ithelp.ithome.com.tw/articles/10137464)
## 使用random

$size: random(50)+50 // 後面的+50等於是 random產生出的數字再+50
$rotateDeg: random(20)-10 // 同理，減10

## 使用陣列
### 公式 nth($list, $n)

$colors: ($colorRed,$colorWhite,$colorBlue,$colorYellow,$colorPurple)
  $bodyColor: nth($colors,random(5)) //回傳colors裡面指定的item
  $ribbonColor: nth($colors,random(5))

# SMACSS 模組化風格
## 使用Reset CSS
* 會將所有預設的css樣式清空，再自行設置想要設置的樣式
* 建議先將自己的樣式擺第一個，reset樣式擺第二個，之後是排版
### [Meyerweb.CSS](https://meyerweb.com/eric/tools/css/reset/)
* 清除所有的預設樣式
### [Normalize.css](https://necolas.github.io/normalize.css/)
* 留下部分預設樣式

## base 設計模式 （全站設定）
* reset 後自行客製化的預設樣式。
* 可以將網頁大部分的樣式設至在bass檔案，再用主要的sass檔修改其餘樣式
### 參考資料
> [Pure.css->yahoo設計的base.css混合reset.css樣式](https://purecss.io/start/)
## layout 佈局
* 可將固定的佈局（如navber or head or footer）拆出來獨自的sass檔來做管理
* 固定的佈局除上述說明外，若有相似的列表、圖片設定皆可
* 相同的佈局可以重覆利用。
* 減少語意化名稱，改為前綴詞+通用的功能或項目名稱（如bootstrap範例）

## module（模組化）
* 擴充、增加子模組
* 方便HTML語意化調整，CSS盡量不指定HTML Tag

>[SMACSS-六角同學範例](https://codepen.io/mdqzrgag/pen/poJdxLV?editors=0100)

# OOCSS（容器與內容分離）模組化風格
>[OOCSS-六角同學範例](https://codepen.io/ritatari/pen/GRJMmOm?editors=0100)
### 參考資料
>[CSS 的模組化方法：OOCSS、SMACSS、BEM、CSS Modules、CSS in JS](https://cythilya.github.io/2018/06/05/css-methodologies/)
>[SMACSS 教學](https://medium.com/@savemuse/smacss-%E6%95%99%E5%AD%B8-c94e858aa762)
>[Day1 關於命名規則-OOCSS、SMACSS、BEM命名規則](https://ithelp.ithome.com.tw/articles/10213186)
>[這麼多Sass/CSS設計模式，究竟該如何逐步學習？](https://github.com/gonsakon/Learn-Sass-in-90-days/blob/master/docs/CssDesignPattern/%E9%80%99%E9%BA%BC%E5%A4%9ASASS:CSS%E8%A8%AD%E8%A8%88%E6%A8%A1%E5%BC%8F%EF%BC%8C%E7%A9%B6%E7%AB%9F%E8%A9%B2%E5%A6%82%E4%BD%95%E9%80%90%E6%AD%A5%E5%AD%B8%E7%BF%92%EF%BC%9F.markdown)
>[六角同學作業](https://codepen.io/PaCheng/pen/bGbJGOW?editors=1100)

# 參考資料
> [Sass - 前端工程師應該要會的工程化 CSS - 計算功能與顏色、list、map 的輔助函式](https://kakadodo.github.io/2018/11/13/css-sass-5/)
> [你可能不知道的 Sass 技巧](https://medium.com/d-d-mag/%E4%BD%A0%E5%8F%AF%E8%83%BD%E4%B8%8D%E7%9F%A5%E9%81%93%E7%9A%84-sass-%E6%8A%80%E5%B7%A7-c97d4d5e0fc4)
> [Sass筆記](https://hackmd.io/@zui-PQ41SBeiggsaqjkMDw/rkKZYqRnV?type=view)
> [前端工程日誌](http://sam0512.blogspot.com/2013/10/sass.html)
> [SASS官網](https://sass-lang.com/documentation)
> [sass中文](https://www.sass.hk/docs/)
> [bootstrap scss github](https://github.com/twbs/bootstrap/blob/master/scss/_variables.scss)
> [[筆記] SASS / SCSS](https://pjchender.github.io/2017/11/01/%E7%AD%86%E8%A8%98-sass-scss/)
> [css convert sass](https://css2sass.herokuapp.com/)