Mixin 值

相容性
Dart Sass
自 1.69.0 版本起
LibSass
✗
Ruby Sass
✗

Mixins 也可以作為值！雖然您不能直接將 mixin 寫成值，但您可以將 mixin 的名稱傳遞給 meta.get-mixin() 函式 以將其作為值取得。取得 mixin 值後，您可以將其傳遞給 meta.apply() mixin 來呼叫它。這是為了讓函式庫能夠以複雜且強大的方式進行擴展。

程式碼遊樂場

SCSS 語法

@use "sass:meta";
@use "sass:string";

/// Passes each element of $list to a separate invocation of $mixin.
@mixin apply-to-all($mixin, $list) {
  @each $element in $list {
    @include meta.apply($mixin, $element);
  }
}

@mixin font-class($size) {
  .font-#{$size} {
    font-size: $size;
  }
}

$sizes: [8px, 12px, 2rem];

@include apply-to-all(meta.get-mixin("font-class"), $sizes);
程式碼遊樂場

Sass 語法

@use "sass:meta"
@use "sass:string"

/// Passes each element of $list to a separate invocation of $mixin.
@mixin apply-to-all($mixin, $list)
  @each $element in $list
    @include meta.apply($mixin, $element)



@mixin font-class($size)
  .font-#{$size}
    font-size: $size



$sizes: 8px, 12px 2rem

@include apply-to-all(meta.get-mixin("font-class"), $sizes)

CSS 輸出

.font-8px {
  font-size: 8px;
}

.font-12px {
  font-size: 12px;
}

.font-2rem {
  font-size: 2rem;
}