Question

我想简化以下CSS规则：

.class > li > a:hover,
.class > li > span:hover,
.class > li > a:focus,
.class > li > span:focus,
.class > .active > a,
.class > .active > span,
.class > .active > a:hover,
.class > .active > span:hover,
.class > .active > a:focus,
.class > .active > span:focus {
  background-color: #ccc;
}

只有

.class > li > a:hover,
.class > li > span:hover,
.class > li > a:focus,
.class > li > span:focus {
  background-color: #ccc;
}

允许：

.class > li {
  > a:hover, > span:hover, > a:focus, > span:focus {
    background-color:#cccccc;
  }
}

但我也有.active组，和其他一些直接的孩子一样。我还可以定义和链接嵌套元素组，例如：

.class {
  > li {> a:hover, > span:hover, > a:focus, > span:focus},
  > .active {> a, > span, > a:hover, > span:hover, > a:focus, > span:focus}
  {
    background-color:#ccc;
  }
}

Answer 1

您可以使用下面的extend来扩展属性并组合选择器。

.class {
    > li {
        > a:hover, > span:hover, > a:focus, > span:focus {
            background-color:#cccccc;
        }
    }
    > .active {
        > a, > span, > a:hover, > span:hover, > a:focus, > span:focus{
            &:extend(.class > li > a:hover);
        }
    }
}

请注意，extend函数的参数应该具有完整的选择器路径，例如.class > li > a:hover，只有li > a:hover或a:hover赢了＆＃39工作。

或者，您也可以为所有常见道具（如下所示）使用单独的规则集，并在两个地方使用它。但是，使用此方法会在编译的CSS中添加一个额外的选择器（.common-props），但我想一行不应该有太大的区别。

.class {
    > li {
        > a:hover, > span:hover, > a:focus, > span:focus {
            &:extend(.common-props);
        }
    }
    > .active {
        > a, > span, > a:hover, > span:hover, > a:focus, > span:focus{
            &:extend(.common-props);
        }
    }
}

.common-props{
      background-color:#cccccc;
}

甚至更简单你可以这样做（我的个人喜好是这样的）：

.class {
    > li > a:hover, > li > span:hover, > li > a:focus, 
    > li > span:focus, > .active > a, > .active > span, 
    > .active > a:hover, > .active > span:hover,  
    > .active > a:focus, > .active > span:focus{
        background-color:#cccccc;
    }
}

是否可以在LESS中定义和链接嵌套组

1 个答案: