Css 是否可以在Sass/SCS中生成以选择器为参数的函数/混合/速记？

大概是这样的：

@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虚线currentColor；}
导航>缩写：悬停{border:2px solid currentColor；}
a、 kebap{边框：1px虚线currentColor；}
a、 kebap:hover{border:2px solid currentColor；}
#bleepable构造函数{边框：1px虚线currentColor；}
#bleepable构造函数：悬停{border:2px solid currentColor；}

---

是这样吗？

是的，可以使用

@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');

有关带参数的mixin的参考，请参阅