Question

我一直在使用Less CSS - 主要用于基础知识。

我有这种情况 - 我试图缩短它但尚未找到解决方案，但感觉它应该是可能的。有什么想法吗？

.grid-container
{
    & > h1, & > h2, & > h3, & > h4, & > h5, & > h6
    {
        &:extend(.grid);
    }
}

我想将扩展名应用于.grid-container的所有子项，即标题。我知道我可以删除＆符号，但是有一个短代码路由吗？我在想这样的事情（这不起作用）：

& > h1,h2,h3,h4,h5,h6 {}

Answer 1

选择器已经很短了，我不认为你真的需要进一步缩短它。但如果你真的希望出于某种原因这样做，你可以尝试以下方法：

h1, h2, h3, h4, h5, h6 {
  .grid-container > &:extend(.grid){};
}

此处，&表示父选择器组中的每个选择器，因此您将.grid的属性扩展到.grid-container下的所有标题。

已编译的CSS

.grid,
.grid-continer > h1,
.grid-continer > h2,
.grid-continer > h3,
.grid-continer > h4,
.grid-continer > h5,
.grid-continer > h6 {
  /* rules */
}

或者，更简单的方法是为所有标题分配一个公共类，然后执行以下操作：

.grid-container .common-props-for-all-headings:extend(.grid){};

＆＃13;

.grid-container .common-props-for-all-headings{
  width: 50%;
  border: 1px solid steelblue;
  margin: 10px auto;
}
h1{
  color: red;
}
h2{
  color: blue;
}
h3{
  color: green;
}
h4{
  color: orange;
}
h5{
  color: gold;
}
h6{
  color: brown;
}

＆＃13;

<div class='grid-container'>
  <h1 class='common-props-for-all-headings'>Heading 1</h1>
  <h2 class='common-props-for-all-headings'>Heading 2</h2>
  <h3 class='common-props-for-all-headings'>Heading 3</h3>
  <h4 class='common-props-for-all-headings'>Heading 4</h4>
  <h5 class='common-props-for-all-headings'>Heading 5</h5>
  <h6 class='common-props-for-all-headings'>Heading 6</h6>
</div>

＆＃13;

这个选择器可以缩短吗？

1 个答案: