include - sass placeholder

Algo entre @include y @extend con sass

Question

¿Es posible incluir una regla css en sass sin duplicar el código? Con extender estamos ampliando el código, pero no quiero ese eiter. Quiero incluirlo, sin duplicar el código.

Por ejemplo

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

Entonces las dos últimas reglas existen porque se están extendiendo (entiendo los beneficios de esto). Pero si quiero que ambos usen las clases, y las amplíe, no quiero que se extiendan, solo inclúyanlo. Pero no quiero que duplique el código.

Yo quiero:

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

Si usa una clase extendida (o usa un nombre de clase que difiere de uno que está repitiendo en otro lugar), puede obtener el resultado que está buscando:

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

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

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

Salida:

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

.box {
  background: red;
}

.box h1 {
  color: white;
}

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