@include和@extend之间的东西与sass [英] Something between @include and @extend with sass
问题描述
是否可以在sass中包含css规则而不重复代码?
随着扩展我们正在扩展代码,但我不想要那个eiter。我想要包含它,不需要重复代码。
Is it possible to include a css rule in sass without duplicate the code? With extend we are extending the code, but i dont want that eiter. I want include it, without duplicating code.
对于示例
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;
}
所以最后两条规则是因为它的延伸(我理解的好处是它)。
但是如果我想要使用类,并且扩展我不希望它扩展,只需包含它。但我不希望它复制代码。
So the two last rules there are because its extending (I understand the benifits of it). But if i want to both use classes, and extends i dont want it to extend, just include it. But i dont want it to duplicate the code.
我想:
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;
}
推荐答案
如果你使用扩展类(或使用与您在其他地方重复的类名称不同的类名称),您可以获得您正在寻找的输出:
If you use an extend class (or use a class name that differs from one you're repeating elsewhere), you can get the output you're looking for:
%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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!