如何在 SCSS 中简单地设置样式，以便多个元素使用相同的样式

Question

我是刚来的。

这是我在 scss 中的代码。只是想知道这是否可以进一步简化，即我不想重复样式颜色、文本装饰和过渡。

a {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
div.menu-item-click {
&:hover, &:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;   
}
}

Answer 1

请注意，ReSedano 更好地

提供了用例。你可以使用mixins来做到这一点：

@mixin mixinName {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
a {
@include mixinName;
}
div.menu-item-click {
&:hover, &:focus {
@include mixinName; 
}
}

这里还有变量的例子：

@mixin icon($width) {
width: $width;
stroke: currentColor;
}
.icon {
@include icon(25px);
}

这是身体的例子

@mixin desktop ($xl: null) { // look here is default Value!
@media (min-width: if($xl, $xl, $screen-desktop)) { 
@content; // here is true magic
}
}
.page {
@include desktop { // you may ignore variable because we have default
padding: 30px;
}
}

Answer 2

为此，也许最好使用带有@extend指令的占位符(输出不如使用 mixin 那么冗长(：

%my-class {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
a {
@extend %my-class;
}
div.menu-item-click {
&:hover, &:focus {
@extend %my-class;
}
}

输出为：

a, div.menu-item-click:hover, div.menu-item-click:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}