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

请注意,用例是由 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;
    }
}

为此,使用占位符和 @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;
}