sass - SASS 在一个元素中嵌套多个类
问题描述
假设我有这个 HTML 代码:
<div class="parent">
<div class="parent__son parent__son--red"></div>
<div class="parent__son parent__son--yellow"></div>
<div class="parent__son parent__son--red parent__son--yellow" ></div>
</div>
父母有 3 个儿子 - 第一个是“红色”,第二个是“黄色”,第三个是两个。
现在我想做这个嵌套 SCSS:
.parent {
width: 100%;
&__son {
width: 20%;
&--red {
background: red;
}
&--yellow {
background: yellow;
}
}
}
现在我希望那个既有红色又有黄色的儿子有背景橙色。我怎样才能在 SASS 中写这个?
解决方案
一点点 Sass Ampersand 魔法会让你到达那里。
插值括号 #{ } 是必需的,因为两个接触的 & 号是无效的 Sass
.parent {
width: 100%;
&__son {
width: 20%;
&--red {
background: red;
}
&--yellow {
background: yellow;
}
&--yellow#{&}--red {
background: orange;
}
}
}
推荐阅读
- javascript - 当有多个相同的类启动该函数时,如何确保该函数仅被触发一次
- algorithm - Edmond 最大分支算法
- sql - 合并当年和上一年的结果
- groovy - 如何检查文本文件以查看它是否包含字符串变量的值
- sqlite - 将一个表中的值镜像到另一个表中,以便在 SQLite 中快速访问
- c# - 如何在 SWIG 中将 C 参数(const uint8_t*,unsigned int 大小)转换为 C# byte[]
- php - 为什么 Laravel Dusk 不启动浏览器窗口?
- python - load_weights_from_hdf5_group original_keras_version AttributeError:“str”对象没有属性“decode”
- c# - 在 EF Core 中的 SaveChanges() 上获取所有错误
- java - Jgit - 如何过滤大文件克隆