是否可以在Sass/SCSS中创建以选择器为参数的函数/mixin/shorthands

Question

类似这样的东西：

@mystery-functionality border-different-when-hover($selector) {
$selector {
border: 1px dashed currentColor;
}
$selector:hover {
border: 2px solid currentColor;
}
}
@use-mystery-functionality border-different-when-hover(nav > abbr);
@use-mystery-functionality border-different-when-hover(a.kebap);
@use-mystery-functionality border-different-when-hover(#bleepable-constructor);

它将编译为：

nav > abbr {border: 1px dashed currentColor;}
nav > abbr:hover {border: 2px solid currentColor;}
a.kebap {border: 1px dashed currentColor;}
a.kebap:hover {border: 2px solid currentColor;}
#bleepable-constructor {border: 1px dashed currentColor;}
#bleepable-constructor:hover {border: 2px solid currentColor;}

这是一件事吗？

Answer 1

是的，这可以通过使用@mixin，在mixin中转义选择器，并将选择器作为字符串传递到mixin来实现。

@mixin border-different-when-hover($selector) {
#{$selector} {
border: 1px dashed currentColor;
}
#{$selector}:hover {
border: 2px solid currentColor;
}
}
@include border-different-when-hover('nav > abbr');
@include border-different-when-hover('a.kebap');
@include border-different-when-hover('#bleepable-constructor');

请参阅https://sass-lang.com/documentation/at-rules/mixin#arguments供带参数的mixin参考。