Question

我有这个更少：

.border-dashed {
    border-style: dashed;

    &-1 {
        border-width: 1px;
    }

    &-2 {
        border-width: 2px;
    }
}

哪个会生成以下CSS：

.border-dashed {
    border-style: dashed;
}

.border-dashed-1 {
    border-width: 2px;
}

.border-dashed-2 {
    border-width: 2px;
}

但是请注意，现在有.border-dashed类将只设置边框样式，我不希望人们仅使用此类。为了强制使用.border-dashed-1或.border-dashed-2，有什么方法不能生成此类？

我可以使用以下内容，然后复制属性。

.border-dashed {  
    &-1 {
        border-style: dashed;
        border-width: 2px;
    }

    &-2 {
        border-style: dashed;
        border-width: 2px;
    }
}

Answer 1

您可以将&*选择器放在这样的列表中：

.border-dashed {  
    &-1, &-2{
      border-style: dashed;
    }
    &-1 {

        border-width: 2px;
    }

    &-2 {
        border-width: 2px;
    }
}

哪个给出结果：

.border-dashed-1,
.border-dashed-2 {
  border-style: dashed;
}
.border-dashed-1 {
  border-width: 2px;
}
.border-dashed-2 {
  border-width: 2px;
}

应该得到您想要的结果。

这不是100％理想的，因为您必须在列表中包括所有通用属性，而不是根据层次结构自动添加所有变体。如果那变得麻烦，那么可以选择使用mixin。尽管您将不得不在所有子块中重复该操作，但是仍然可以享受单点更新的好处，并且如果您具有许多通用属性，该功能尤其有用。

.border-dashed {
    .common(){
       border-style: dashed; 
       border-color:red;
       //whatever
    }
    &-1 {
        .common;
        border-width: 2px;
    }

    &-2 {
        .common;
        border-width: 2px;
    }
}

在LESS中删除冗余父类？

1 个答案: