Compatibility:
Mixins can also be values! You can’t directly write a mixin as a value, but you can pass a mixin’s name to the meta.get-mixin()
function to get it as a value. Once you have a mixin value, you can pass it to the meta.apply()
mixin to call it. This is for libraries to be extensible in complex and powerful ways.
@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);
Playground Sass Syntax
@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 Output
.font-8px {
font-size: 8px;
}
.font-12px {
font-size: 12px;
}
.font-2rem {
font-size: 2rem;
}
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4