Блог

Я пытаюсь создать карту. Предполагается, что я использую некоторый стиль из другого проекта. Структура карты выглядит следующим образом:

 <div class="card__block">
  <img src="/images/1" />
  <div>This is the body</div>
</div>
 

Микс для card__block импортируется / для повторного использования из другого проекта, в котором есть все базовые стили.

Определенный mixin выглядит следующим образом:

 @mixin card_block {
padding: 0;
margin:0;
background:#fff;
} 
 

// попробовал приведенный ниже код:

 @import dependencyBaseProjectStyles;

.card {
@include  card__block;
}
 

//Когда я пытаюсь переименовать card__block, ошибка: mixin card__block не существует.

Должен ли я просто использовать имя класса или скопировать весь микс и включить его в свой проект для применения стилей?

Вам нужно использовать то же имя @include , что и в соответствии @mixin с документацией SCSS. Здесь оба имени отличаются @mixin card_block и @include card__block .

Ваше имя микшера card_block (одинарное подчеркивание между ними), и вы включаете его как @card__block(двойное подчеркивание между ними). Ваше имя mixin и включенный mixin должны иметь одно и то же имя. @mixin и @includes идет рука об руку. @includes означает, что вы добавляете существующий mixin в свой текущий набор правил.

Если вы хотите переименовать существующее имя mixin, вы можете сделать это следующим образом.

 @mixin card_block {
 padding: 0;
 margin: 0;
 background:#fffff;
}

@mixin card__block {
 @include @card_block;
}