Включення іншого класу в SCSS

309

Я маю це у своєму файлі SCSS:

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

.class-b{

 //Inherite class-a here

 //some properties
}

У класі-b я хотів би успадкувати всі властивості та вкладені декларації class-a. Як це робиться? Я спробував використовувати @include class-a, але це просто видає помилку при компілюванні.

inheritance sass

— F21
джерело

624

Схоже, @mixinі @includeне потрібні для простого випадку, як це.

Можна просто зробити:

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

.myotherclass {
  @extend .myclass;
  color: #000000;
}

— F21
джерело

40

@extend працює нормально, але не працюватиме, якщо будь-який з класів входить в директиву (зазвичай медіа-запит); якщо вони обидва не в одній директиві.

— MartinAnsty

13

дивіться тут кілька цікавих фактів про @extend- є деякі хитрі побічні ефекти, про які слід знати: stackoverflow.com/questions/30744625/…

— Тоні Лей,

2

Дякую @ToniLeigh, PlaceHolder цікаві тим, що вони заощаджують генерацію додаткового селектора CSS, якщо батьківський селектор використовується лише для розширення (не використовується ніде). Як, наприклад, у наведеному вище прикладі .myclassне використовується більше ніде (я вважаю) крім .myotherclass, тоді краще .myclassвизначити як %myclassі розширено в .myotherclassяк @extend %myclass;. Це породжуватиметься.myotherclass{ font-weight: bold; font-size: 90px; color: #000000; }

— Абхієет

5

Приклад використання власника місць Vs Приклад використання звичайного селектора класів

— Абхієет

@MartinAnsty Добре, що смокче.

— Аврам

51

Спробуйте це:

Створіть базовий клас заповнювача (% базовий клас) із загальними властивостями
Розгорніть свій клас (.my-base-class) за допомогою цього заповнення.

Тепер ви можете розширити% базовий клас у будь-якому зі своїх класів (наприклад, .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;
}

— Ешвін
джерело

Я думаю, що ця відповідь така сама, як найпопулярніша. Маю рацію?

— Євген Афанасьєв

1

@ Євгеній Афанасьєв Ні, ви не поширюєте клас безпосередньо, але можете безпосередньо розширити заповнювач.

— Ешвін

Ніколи не запитували :(

— Євген Афанасьєв

1

@ Євгеній Афанасьєв, розширення класу безпосередньо (найпопулярніша відповідь) не працював для мене, але розширення заповнювача заповнило свою роботу. Тому я опублікував відповідь, оскільки це не та сама відповідь.

— Ешвін

3

Дякуємо, що опублікували альтернативну відповідь, але з вашої відповіді не зрозуміло, навіщо вона нам потрібна. Якщо ви можете додати більше міркувань для уточнення випадку використання або переваг цього підходу, було б вдячно. Дякую.

— Євген Афанасьєв

16

Використання @extend є прекрасним рішенням, але пам’ятайте, що складений css розбиває визначення класу. Усі класи, що поширюють один і той же заповнювач, будуть згруповані разом, і правила, які не розширені в класі, будуть в окремому визначенні. Якщо кілька класів будуть розширені, шукати селектора в складеному css або інструментах розробників може бути нерозумно. Тоді як міксин буде дублювати код міксіна та додавати будь-які додаткові стилі.

Ви можете побачити різницю між @extend та @mixin у цьому sassmeister

— Арі
джерело

Ланка sassmeister розірвана.

— LexieHankins

11

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

— mcmaxwell
джерело

22

Хоча цей код може відповісти на питання, надаючи додатковий контекст щодо того, чому та / або як цей код відповідає на питання, покращує його довгострокове значення.

— адига

2

@extend #{'.my-class', '.my-other-class'};

— iarroyo

2

Що тут має значення хашбанг?

— Конрад Вільтерстен

7

Іншим варіантом може бути використання засобу вибору атрибутів:

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

Тоді як кожен клас, що починається з імені вашого класу, використовує цей стиль.

Тож у вашому випадку ви могли це зробити так:

[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%);
  }
}

Докладніше про засоби вибору атрибутів у w3Schools

— Ханджі
джерело