@include和@extend之間的東西與sass

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