Sass教學-@mixin

為何我們要學@mixin?

@mixin可以幫助我們將一些常用語法模組化，協助專案開發時不會因為忘記相關CSS語法而打斷開發思緒。EX：clear清除浮動、等比例圖片放大、圖片取代文字等語法

了解目的後，我們來看一下，@mixin怎麼使用吧

1.首先新增一隻scss檔案，並以語意化方式命名~EX：_clearfix.scss

2.語法如下：

@mixin clearfix() {

  &::after {

    display: block;

    clear: both;

    content: "";

  }

}

.box{

    @include clearfix;

}

Tips：

1.匯入語法時，前面要加@include

2.設定語法時，前面要加@mixin

3.編譯結果

• 接著，我們來使用帶入變數寫法

上一篇Sass教學-變數有提到變數寫法是「$」+「變數」，故結合@mixin我們可以這樣寫

@mixin circle($size,$background){

      width: $size ;

      height: $size ;

      background: $background ;

}

box{

    @include circle(50px,black)

}

編譯結果示意圖如下

• 最後，我們來學習如何用@mixin 搭配 @content 之RWD用法教學

開始前，我們先思考一下為何需要使用這樣的寫法呢?

我自己的理解如下：

過往我們在撰寫不同斷點時，往往每次都需要重複撰寫@media(max-width:768px)的不同斷點，一來時間耗費、二來日後管理也需要耗費許多時間重新調整，所以才會藉由將變數並搭配mixin、@content，方便之後管理專案 我們就來看下面說明吧!

1._variable.scss檔案(設定變數)

$desktop: 960px;

$pad: 768px;

$mobile: 576px;

2._mixin.scss檔案撰寫

@mixin breakPoint($breakPoint) {

@media (max-width: $breakPoint) {

@content;

}

}

.section {

width: 100px;

@include breakPoint($mobile) {

a:hover {

background-color: $bg-color;

}

&.active {

color: $link-color;

}

}

}

說明：

1.@content，提供我們可以自行載入需要的Css

2.@mixin變數可以跟@include變數不同

@mixin breakPoint($breakPoint)

@include breakPoint($mobile)

3.編譯結果如下

.section {

width: 100px;

}

@media (max-width: 576px) {

.section a:hover {

background-color: #00cc99;

}

.section.active {

color: purple;

}

}

參考資料：

文章內容整理自六角學院 Sass課程 課程連結