如何更改孩子的颜色
如何更改孩子的颜色
提问于 2018-08-06 23:20:26
请告诉我如何使用Vue.js和/或SCSS工具来实现逻辑。根据子div的级别(data-level -从1到6)，颜色会发生变化。在jQuery中有一个已实现的示例。
.ui-core-skill {
display: flex;
align-items: center;
}
.ui-core-skill-name {
float: left;
margin: 0 7px 0 0;
}
.ui-core-skill-level {
display: flex;
align-items: center;
.dot-max {
height: 9px;
width: 9px;
float: left;
border-radius: 50%;
margin: 0 5px 0 5px;
}
.dot-mid {
height: 7px;
width: 7px;
@extend .dot-max;
}
.dot-min {
height: 5px;
width: 5px;
@extend .dot-max;
}
}<div class="ui-core-skill">
<span class="ui-core-skill-name">Name</span>
<div class="ui-core-skill-level" data-level="4">
<div class="dot-max"></div>
<div class="dot-mid"></div>
<div class="dot-min">
</div>
</div>
</div>
回答 1
Stack Overflow用户
发布于 2018-08-08 05:32:31
仅使用scss的最简单的解决方案是为每个级别执行以下操作：
/*Your old scss goes above here*/
.ui-core-skill-level[data-level="4"] {
.dot{
&-max{
background-color: rgba(238, 122, 71, 1);
}
&-mid{
background-color: rgba(238, 122, 71, 1);
}
&-min{
background-color: rgba(238, 122, 71, .3);
}
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51710881
复制相关文章
相似问题
腾讯云开发者
