Einbindung einer weiteren Klasse in SCSS

Question

Ich habe dies in meiner SCSS-Datei:

.class-a{
  display: inline-block;
  //some other properties
  &:hover{
   color: darken(#FFFFFF, 10%);
 }  
}

.class-b{

 //Inherite class-a here

 //some properties
}

In Klasse b möchte ich alle Eigenschaften und verschachtelten Deklarationen von class-a . Wie wird das gemacht? Ich habe versucht, mit @include class-a aber das führt beim Kompilieren zu einem Fehler.

Answer 1

Kombinieren Sie Mixin mit Extend

Ich bin gerade über eine Kombination aus Mixin und Extend gestolpert:

wiederverwendete Blöcke:

.block1 { box-shadow: 0 5px 10px #000; }

.block2 { box-shadow: 5px 0 10px #000; }

.block3 { box-shadow: 0 0 1px #000; }

dynamisches Mixin:

@mixin customExtend($class){ @extend .#{$class}; }

mixin verwenden:

mögen: @include customExtend(block1);

h1 {color: fff; @include customExtend(block2);}

Sass kompiliert nur den Inhalt der Mixins zu den erweiterten Blöcken, was es ermöglicht, Blöcke zu kombinieren, ohne doppelten Code zu erzeugen. Die Extend-Logik setzt nur den Klassennamen der Mixin-Importstelle in den Block1, ..., ... {box-shadow: 0 5px 10px #000;}