iT邦幫忙

2021 iThome 鐵人賽

DAY 18
0
Modern Web

使用SASS(SCSS)建立自己的CSS Library系列 第 18

[Day 18] Sass - Mixins

@mixin 與 @include
@mixin通常與@include一起使用,
@mixin用來定義需要重複使用的樣式,@include用來將@mixin的內容涵蓋進來。
我們通常把它用在一些“非真實意義”的clas樣式上,
這樣講有點繞口,舉例來說:
有時候我們會設一個class為“.reset-list”,裡面用來放一些在reset時會重複使用的樣式(非真實意義的class),
這時就可以使用@mixin先將.reset-list中的樣式定義出來,
之後要用的時候再使用@include將@mixin內的樣式涵蓋進來~
話不多說,我們一起來看看吧!

//定義reset時會重複使用的樣式
@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin horizontal-list {
  @include reset-list; //horizontal-list中涵蓋reset樣式

  //horizontal-list內的li樣式
  li {
    display: inline-block;
    margin: {
      left: -2px;
      right: 2em;
    }
  }
}

nav ul {
  @include horizontal-list;
} //將上述"horizontal-list樣式"、"horizontal-list內的li樣式"都一起涵蓋進來

來看看css會變怎樣

//nav ul涵蓋horizontal-list樣式,horizontal-list樣式又涵蓋了reset樣式
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
//nav ul涵蓋horizontal-list樣式,horizontal-list內還有li的樣式
nav ul li {
  display: inline-block;
  margin-left: -2px;
  margin-right: 2em;
}

當然,@mixin的用法不只如此,
如果有興趣的話,可以到
https://www.sasscss.com/documentation/at-rules/mixin
看到更多有趣的用法喔!


上一篇
[Day 17] Sass - Parent Selector
下一篇
[Day 19] Sass - Functions
系列文
使用SASS(SCSS)建立自己的CSS Library21

尚未有邦友留言

立即登入留言