Sass基礎學習No.4-Sass裡個性化的複製機@mixin

發表於 更新於 分類於 ，

@mixin好用在哪？

透過使用@mixin來解決重複寫一段同樣程式碼的困擾。

假設<header>跟<footer>擁有一樣的背景顏色、文字大小、文字顏色，這時候就可以使用@mixin來將這些東西包裹住後，在<header>跟<footer>的Sass中利用@include 來取得這個@mixin。

使用方法

  • @mixin name，後面的name就是這段@mixin的名稱。
  • 在.scss中，使用@include取得@mixin值，而.sass則可直接使用”+”(與@mixin名稱無須空格)。
1
2
3
4
5
6
7
8
9
10
//.sass
@mixin hide-text
    text-indent: 101%
    overflow: hidden
    white-space: nowrap

header
    +bg
    a
        +hide-text
1
2
3
4
5
6
7
8
9
10
//.scss
@mixin border-radius{
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.body {
    @include border-radius;
}

@mixin帶參數，結果會…

1
2
3
4
5
6
7
8
9
@mixin text-border($border-width,$border-color)
    border: $border-width $border-color  solid
    border-radius: 50px
header
    +text-border(3px,$Antique-fuchsia)
    a
        +text-border(9px,$Antique-fuchsia)
footer
    +text-border(5px,$Bistre)

這樣一來只要更改@mixin text-border(parameter1,parameter2)的參數值，就可以讓<header>跟<footer>擁有不一樣的的線條寬度及顏色。

@mixin name(parameter1,parameter2,…)可擁有許多參數，參數也可以帶入設定的變數喔！

可以怎麼運用@mixin

利用@mixin結合RWD

Sass的@mixin結合斷點的設計，與CSS寫RWD的順序不太一樣，在一般寫CSS斷點時，寫法是@media(斷點){各區塊樣式}，但在寫Sass時，區塊在前，在匯入(@include或+ )mixinName。

1
2
3
4
5
6
7
8
9
10
//CSS
@media (max-width: 767px) {
.cart {
    font-size: 16px;
    color: #3d2b1f;
  }
.login {
    background: #ff033e;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//.sass
@mixin mobile
    @media(max-width:576px)
        @content

@mixin pad
    @media(max-width:767px)
        @content

.cart
    +mobile
        font-size: 16px
        color: $Bistre

.login
    +pad
        background: $Antique-fuchsia

@content的用意

每個斷點的每個區塊都會有專屬於自己的樣式，這時候@content就是來處裡這個問題，在匯入(@include或+ )mixinName後，下方直接寫入所需樣式，@content就會變所寫成所寫的樣式，成為這個斷點這個區塊的樣式，所以在每個區塊的@content就是所寫的樣式。可以參考下方圖片說明

1
2
3
4
//@mixin裡可以再匯入另一個@mixin
.login
    +mobile
        +text-border(3px,$Antique-fuchsia)