如何解决将容器类用于组件的最佳方法是什么?
我正在尝试制作卡片。我应该使用来自不同项目的一些样式。卡片结构如下:
<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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。