What is the best way to use the container class for a component?

Question

I am trying to build a card. I am supposed to use some styling from a different project. The structure of the card is as follows:

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

The mixin for the card__block is being imported/to be reused from a different project which has all the base styles.

The mixin defined is as follows:

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

//tried the below code:

@import dependencyBaseProjectStyles;

.card {
@include  card__block;
}

//When I try to rename the card__block,error: mixin card__block does not exist.

Should I just use the class name or copy the whole mixin and include it in my project for the styles to be applied?

Answer 1

You need to use same name in @include as you defined in @mixin as per SCSS documentation. Here, both name are different @mixin card_block and @include card__block.

Answer 2

Your mixin name is card_block (single underscore between them) and you are including it as @card__block(double underscore between them). Your mixin name and included mixin should have the same name. @mixin and @includes goes hand in hand. @includes means you are adding the existing mixin in your current rule set.

If you want to rename the existing mixin name then you could do it like this.

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

@mixin card__block {
 @include @card_block;
}