[筆記] 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;
  }
}

// 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;

}

Sass 實戰全攻略系列文章

[筆記] Sass 實戰全攻略 – 11 – 自製格線系統

[筆記] Sass 實戰全攻略 – 10 – 設計模式和規範

[筆記] Sass 實戰全攻略 – 9 – 錯誤的 CSS 設計方式

[筆記] Sass 實戰全攻略 – 8 – 關於命名的那些事兒

[筆記] Sass 實戰全攻略 – 7 – Sass/CSS 設計模式 (OOCSS)

[筆記] Sass 實戰全攻略 – 6 – Sass/CSS 設計模式 (Smacss)

[筆記] Sass 實戰全攻略 – 4 – mixin 統整你常用的 CSS 方法

[筆記] Sass 實戰全攻略 – 3 – import 切分檔案和維護

[筆記] Sass 實戰全攻略 – 2 – 變數的運用

[筆記] Sass 實戰全攻略 – 1 – 簡介

按讚加入粉絲團

課程對應章節

內容

範例

Sass 實戰全攻略系列文章

延伸閱讀