html - 将父 css 规则应用于子项

Question

使用 SCSS，我想将 .parent 中的 disabled 样式应用于其子项。

我当前的 SCSS 结构是这样的:

.parent {
   .disabled {
     background: grey;
   }
   > .group {
      ...
      > .input {
          background: white;
        }
      > .icon {
          background: blue;
        }
   }
}

HTML:

<div class="parent" ng-class="{disabled: el.isDisabled}">
   <div class="group">
      ...
      <textarea class="form-control input">
         ...
      </textarea>
      <div class="icon">
         ...
      </div>
   </div>
</div>

如何将这些样式应用于input 和icon？

---

对于上下文，我目前拥有的是相当多余的:

.parent {
   > .group {
      ...
      > .input {
           background: white;
           &.disabled {
              background: grey;
           }
        }
      > .icon {
           background: blue;
           &.disabled {
              background: grey;
           }
        }
   }
}

Answer 1

只需将您的类嵌套在禁用类中:

   .parent.disabled {
     > .group {
       ...
       > .icon,
       > .input {
         background: grey;
       }
     }
   }