[筆記] Sass 實戰全攻略 – 5 – mixin 解決響應式網頁的斷點問題 @地瓜大的飛翔旅程

章節連結

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

Sass 的 mixin 可以幫助使用者在編寫 RWD 響應式網頁格式時，可以預先指定好自身常用的樣式表和斷點。這樣一來在實際運用上，可以增加可讀性，同時也避免當 css 檔的程式行數越發多時，容易漏改地方的問題。

課程對應章節

Course 29 ～ Course 31 (全部一共有 72 Courses)

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

內容

1. mixin 搭配 @content，就會自動帶入你在指定 @include 的內容。這樣一來，你可以預先寫好各種常用的斷點，並給予命名來方便日後管理。
2.撰寫時，依舊要注意由上到下的讀取法則。可以搭配 @import 在作為索引的 all.scss 在一開始就先載入。

範例

// all.scss
@import 'mixin';
@import 'mobile';

.box{
  font-size:32px;
  @include mobile{
    font-size: 24px;
  }
  @include pad{
    font-size:28px;
  }
}

// _mobile.scss 
@mixin pad{
  @media(max-width: 768px){
    @content;
  }
}

@mixin mobile{
  @media (max-width:568px) {
    @content
  }
}

// all.css
.box {
  font-size: 32px;
}

@media (max-width: 568px) {
  .box {
    font-size: 24px;
  }
}

@media (max-width: 768px) {
  .box {
    font-size: 28px;
  }
}