如何改变孩子的颜色答案

【问题标题】：How to change the color of children如何改变孩子的颜色
【发布时间】：2019-01-13 14:31:41
【问题描述】：

请告诉我如何使用工具 Vue.js 和/或 SCSS 来实现逻辑。根据子 div 的级别（数据级别 - 从 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>

【问题讨论】：

你用Vue试过的代码是什么？

标签： vue.js sass

【解决方案1】：

仅使用 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);
     }
   }
}

【讨论】：