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

问题描述

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

<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 并将其包含在我的项目中以应用样式？

解决方法

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

,

您的 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;
}