代码之家  ›  专栏  ›  技术社区  ›  Denis Stephanov

少继承不行

  •  0
  • Denis Stephanov  · 技术社区  · 6 年前

    嗨,你能检查一下下面的代码吗?我想为类定义一些样式,然后为另一个类应用相同的样式。我已经使用了继承,但没有使用来自父级的样式:

    .parent-item {
      &:not(:last-child) {
        margin-right: 20px;
      }
    }
    
    .child-item {
      &:extend(.parent-item);
      //...
    }
    
    1 回复  |  直到 6 年前
        1
  •  2
  •   Adel Elkhodary    6 年前

    只需添加单词 全部的 类名称旁边

    .child-item {
      &:extend(.parent-item all);
      //...
    }
    

    例如

    .parent-item {
      color: green;
      background: red;
      &:not(:last-child) {
        margin-right: 20px;
      }
    
      &:last-child {
        color: red;
      }
    
      &:hover {
        color: red;
      }
    }
    
    
    
    
    .child-item {
      &:extend(.parent-item all);
      //...
    }
    

    结果将是

    .parent-item,
    .child-item {
      color: green;
      background: red;
    }
    .parent-item:not(:last-child),
    .child-item:not(:last-child) {
      margin-right: 20px;
    }
    .parent-item:last-child,
    .child-item:last-child {
      color: red;
    }
    .parent-item:hover,
    .child-item:hover {
      color: red;
    }