将父css规则应用于子项

Question

使用SCSS，我想在disabled中将.parent个样式应用于其子代。

我目前的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;
       }
     }
   }