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

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:

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

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