W tym kolejna klasa w SCSS

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 dziedziczyć 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 powoduje błąd podczas kompilacji.

Author: Lorenzo Polidori, 2012-03-05
Source

5 answers

Wygląda na to, że @mixin i @include nie są potrzebne do takiej prostej sprawy.

Można po prostu zrobić: 

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

.myotherclass {
  @extend .myclass;
  color: #000000;
}
 442
Author: F21,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-23 13:34:51

Spróbuj tego:

  1. Utwórz klasę bazową zastępczą (%base-class) ze wspólnym właściwości
  2. Rozszerz swoją klasę (. my-base-class) za pomocą tego symbolu zastępczego.

  3. Teraz możesz rozszerzyć %base-class W dowolnej ze swoich klas (np. my-class). 

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

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

.my-class {
    @extend %base-class;
    margin-bottom: 40px;
}
 10
Author: Ashwin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-17 05:06:41

Użycie @ extend jest dobrym rozwiązaniem, ale należy pamiętać, że skompilowany css zepsuje definicję klasy. Klasy, które rozszerzają ten sam symbol zastępczy, zostaną pogrupowane razem, a reguły, które nie są rozszerzone w klasie, znajdą się w oddzielnej definicji. Jeśli kilka klas zostanie rozszerzonych, może stać się niesforne szukanie selektora w skompilowanym css lub narzędziach programistycznych. Natomiast Mixin powieli kod mixin i doda dodatkowe style.

Widać różnicę pomiędzy @extend i @mixin w tym sassmeister

 9
Author: Ari,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-20 22:01:14

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.

Więc w Twoim przypadku możesz to zrobić tak: 

[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 o Selektorach atrybutów na w3Schools

 3
Author: Khanji,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-06 10:19:33 
@extend .myclass;
@extend #{'.my-class'};
 2
Author: mcmaxwell,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-03 12:24:09