[筆記] Sass 實戰全攻略 – 4 – mixin 統整你常用的 CSS 方法 @地瓜大的飛翔旅程

章節連結

課程對應章節
內容
範例
Sass 實戰全攻略系列文章

妥善運用變數和 mixin，這樣就可以方便管理你常用的 css 方法，在必要時候免去你上網 google 查詢的困擾。同時，你也可以藉此開始打包一套屬於自己的常用 mixin 資料庫包，在日後撰寫各種 css 時來優先載入。

課程對應章節

Course 24 ～ Course 28 (全部一共有 72 Courses)

請注意：本系列文章為個人對應課程的消化吸收後，所整理出來的內容。換言之，並不一定會包含全部的課程內容，也有可能會添加其他資源來說明。課程連結網址：http://tinyurl.com/ueo7bm2

內容

1. mixin的語法為 @mixin name{<something>} 或是 @mixin name($a,$b){<something>} 。你可以想像成在寫一個函式，然後你可以傳入變數來做使用。
2. 實際運用上，記得由上到下的讀取規則，先在作為 index 的 all.scss 載入 @import “mixin”，然後在要使用的 css 所在用 @include <方法名稱>(變數)，就可以成功編譯。

範例

// all.scss
@import 'mixin'
@import 'test'

// _mixin.scss
@mixin circle($size,$bgColor){
  border-radius: 50%;
  height: $size;
  width: $size;
  font-size: $size/3;
  background: $bgColor;
}

// _test.scss
.box{
    @include circle(16px, #ff0000)
}

// 編譯結果, all.css
.box {
  border-radius: 50%;
  height: 48px;
  width: 48px;
  font-size: 16px;
  background: #ff0000;
}