将容器类用于组件的最佳方式是什么？答案

【问题标题】：What is the best way to use the container class for a component?将容器类用于组件的最佳方式是什么？
【发布时间】：2021-04-23 09:25:17
【问题描述】：

我正在尝试构建一张卡片。我应该使用来自不同项目的一些样式。卡片结构如下：

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

card__block 的 mixin 正在从具有所有基本样式的不同项目中导入/重用。

mixin定义如下：

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

//试过下面的代码：

@import dependencyBaseProjectStyles;

.card {
@include  card__block;
}

//尝试重命名card__block时，报错：mixin card__block不存在。

我应该只使用类名还是复制整个 mixin 并将其包含在我的项目中以应用样式？

【问题讨论】：

标签： html css sass scss-mixins scss-lint

【解决方案1】：

根据 SCSS 文档，您需要在 @include 中使用与在 @mixin 中定义的名称相同的名称。在这里，@mixin card_block 和 @include card__block 的名称都不同。

【讨论】：

【解决方案2】：

您的 mixin 名称是 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;
}

【讨论】：