Question

我对sass陌生。

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

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

2 个答案: