Question

是否可以在sass中包含css规则而不重复代码？随着扩展我们正在扩展代码，但我不想要那个eiter。我想要包含它，而不需要复制代码。

对于示例

SCSS：

.heading {
    font-size: 16px;
    font-family: my-cool-font;
}

.box {
    background: red;
    h1 {
        @extend .heading;
        color: white;
    }
}

.my-other-box {
    .heading {
        color: black;
    }
}

HTML

<div class="box">
   <h1>My heading</h1>
</div>
<div class="my-other-box">
   <h1 class="heading">My heading</h1>
</div>

CSS

.heading, .box h1 {
    font-size: 16px;
    font-family: my-cool-font;
}
.box {
    background: red;
 }
.box h1 {
    color: white;
}

.my-other-box .heading,
.my-other-box .box h1,
.box .my-other-box h1 {
    color: black;
}

所以最后的两个规则是因为它的扩展（我理解它的好处）。但是，如果我想要使用类，并扩展我不希望它扩展，只需包括它。但我不希望它复制代码。

我想：

CSS

.heading, .box h1 {
    font-size: 16px;
    font-family: my-cool-font;
}
.box {
    background: red;
 }
.box h1 {
    color: white;
}

.my-other-box .heading {
    color: black;
}

Answer 1

如果您使用扩展类（或使用与您在其他地方重复的类名不同的类名），您可以获得您正在寻找的输出：

%heading, .heading {
    font-size: 16px;
    font-family: my-cool-font;
}

.box {
    background: red;
    h1 {
        @extend %heading;
        color: white;
    }
}

.my-other-box {
    .heading {
        color: black;
    }
}

输出：

.box h1, .heading {
  font-size: 16px;
  font-family: my-cool-font;
}

.box {
  background: red;
}

.box h1 {
  color: white;
}

.my-other-box .heading {
  color: black;
}

@include和@extend之间的东西与sass

1 个答案: