Łącznie z inną klasą w SCSS

309

Mam to w moim pliku SCSS:

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

.class-b{

 //Inherite class-a here

 //some properties
}

W klasie b chciałbym odziedziczyć wszystkie właściwości i zagnieżdżone deklaracje class-a. Jak to się robi? Próbowałem użyć @include class-a, ale to po prostu generuje błąd podczas kompilacji.

inheritance sass F21
źródło

Odpowiedzi:

624

Wygląda na to @mixini @includenie jest potrzebny do takiego prostego przypadku.

Można po prostu:

.myclass {
  font-weight: bold;
  font-size: 90px;
}

.myotherclass {
  @extend .myclass;
  color: #000000;
}
F21
źródło
40
@extend działa dobrze, ale nie będzie działać, jeśli jedna z klas mieści się w dyrektywie (zwykle zapytanie medialne); chyba że oba są objęte tą samą dyrektywą.
MartinAnsty
13
zobacz tutaj kilka ciekawych faktów na temat @extend - są pewne podstępne skutki uboczne, o których powinieneś wiedzieć: stackoverflow.com/questions/30744625/…
Toni Leigh
2
Dziękuję @ToniLeigh, PlaceHolder jest interesujący, ponieważ oszczędza generowania dodatkowego selektora CSS, jeśli selektor nadrzędny służy tylko do rozszerzenia (nie jest używany nigdzie). Podobnie jak w powyższym przykładzie, .myclassnie jest on używany nigdzie indziej (chyba), poza .myotherclasstym lepiej jest .myclasszdefiniować jako %myclassi rozszerzyć .myotherclassjako @extend %myclass;. Wygeneruje jako.myotherclass{ font-weight: bold; font-size: 90px; color: #000000; }
Wygeneruje Abhijeet,
5
Przykład użycia Place Holder Vs Przykład użycia normalnego selektora klas
Abhijeet
@MartinAnsty Cóż, to do bani.
Abram
51

Spróbuj tego:

  1. Utwórz zastępczą klasę podstawową (% klasa bazowa) o wspólnych właściwościach
  2. Rozszerz swoją klasę (.my-base-class) o ten symbol zastępczy.

  3. Teraz możesz rozszerzyć% base-class w dowolnej ze swoich klas (np. Moja-klasa).

    %base-class {
   width: 80%;
   margin-left: 10%;
   margin-right: 10%;
}

.my-base-class {
    @extend %base-class;
}

.my-class {
    @extend %base-class;
    margin-bottom: 40px;
}
Ashwin
źródło
Myślę, że ta odpowiedź jest taka sama jak najbardziej popularna. Czy mam rację?
Jewgienij Afanasiew
1
@Yevgeniy Afanasyev Nie, nie rozszerzasz klasy bezpośrednio, ale możesz bezpośrednio rozszerzyć symbol zastępczy.
Ashwin
Nigdy nie
zadawano pytań
1
@Yevgeniy Afanasyev bezpośrednie rozszerzenie klasy (najbardziej popularna odpowiedź) nie działało dla mnie, ale rozszerzenie miejsca zastępczego wykonało pracę. Dlatego opublikowałem odpowiedź, ponieważ nie jest to ta sama odpowiedź.
Ashwin
3
Dziękujemy za opublikowanie alternatywnej odpowiedzi, ale z odpowiedzi nie wynika jasno, dlaczego jej potrzebujemy. Jeśli możesz dodać więcej uzasadnień w celu wyjaśnienia przypadku użycia lub zalet tego podejścia, byłoby to mile widziane. Dziękuję Ci.
Jewgienij Afganijew
16

Użycie @extend jest dobrym rozwiązaniem, ale pamiętaj, że skompilowany css zniszczy definicję klasy. Wszystkie klasy, które rozszerzają ten sam symbol zastępczy, zostaną zgrupowane razem, a reguły, które nie są rozszerzone w klasie, będą miały osobną definicję. Jeśli kilka klas zostanie rozszerzonych, może stać się niesforne wyszukiwanie selektora w skompilowanym css lub narzędziach programistycznych. Podczas gdy mixin powieli kod mixin i doda wszelkie dodatkowe style.

W tym sassmeister widać różnicę między @extend i @mixin

Ari
źródło
Link sassmeister jest zepsuty.
LexieHankins,
11 
@extend .myclass;
@extend #{'.my-class'};
mcmaxwell
źródło
22
Chociaż ten kod może odpowiedzieć na pytanie, zapewnienie dodatkowego kontekstu dotyczącego tego, dlaczego i / lub jak ten kod odpowiada na pytanie, poprawia jego długoterminową wartość.
adiga
2
@extend #{'.my-class', '.my-other-class'};
iarroyo
2
Jakie jest znaczenie hashbangu tutaj?
Konrad Viltersten
7

Inną opcją może być użycie Selektora atrybutów:

[class^="your-class-name"]{
  //your style here
}

Podczas gdy każda klasa zaczynająca się od „your-class-name” używa tego stylu.

W twoim przypadku możesz to zrobić w następujący sposób:

[class^="class"]{
  display: inline-block;
  //some other properties
  &:hover{
   color: darken(#FFFFFF, 10%);
 }  
}

.class-b{
  //specifically for class b
  width: 100px;
  &:hover{
     color: darken(#FFFFFF, 20%);
  }
}

Więcej informacji o selektorach atrybutów w w3Schools

Khanji
źródło