Łą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.

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

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,


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

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


Link sassmeister jest zepsuty.
LexieHankins,

11
@extend .myclass;
@extend #{'.my-class'};

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

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.