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

我是个新手

这是我在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;   
    }
}

---

请确切地注意，用例通过以下方式得到了更好的验证

您可以使用mixin执行此操作：

@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;
    }
}

---

为此，使用带有

@extend

指令的占位符可能更好（输出比使用mixin更详细）：

输出为：

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

---

稍后，我将添加一些更有趣的示例。我已经编辑了我的答案，所以您可以查看更多的用法。

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