定义选择器以应用于其他样式

Question

我对 Less 还很陌生。

有一些来自外部源的动态内容是#left(id selector) 标记的一部分。

这是我的 Less 文件：

//can i define anything like this in `less`
@not-empty: #left:not(:empty);

#left {   
  background-color: red;
   &:not(:empty) {
      font-size: 20px; 
      background-color: green;
   }
}

#right {
background-color: blue;
    font-size: 15px;
    #left:not(:empty) {
    font-size: 23px;
   }
}

如果#left 不为空，我的预期结果将是 apply font-size: 23px。如果不是，那么#right 字体大小将是15px。

我使用的是Less V2.5.0 版本。谁能帮我解决这个问题？

Answer 1

您的 Less 问题的答案是 - 是的，这在 Less 中是可能的。您可以将您的选择器分配给一个变量，然后通过selector interpolation 使用它。下面是一个例子：

#left{
    background-color: red;
    &:not(:empty){
        font-size: 20px;
        background-color: green;
    }
}

#right{
    font-size: 15px;
    @{left-empty} + &{ /* will form #left:not(:empty) + #right */
        font-size: 23px;
    }

    /* You can use the adjacent sibling selector (+) or the general sibling selector (~) depending on your HTML structure */
    @{left-empty} ~ &{ /* will form #left:not(:empty) ~ #right */
        color: red;
    }
}

@left-empty: e("#left:not(:empty)"); /* e() strips out the quotes */

正如 cmets 中的 7-phases-max 所述，如果您期望 @not-empty: #left:not(:empty); 评估为布尔值 true 或 false 并像 if 条件一样使用它，那么使用 Less 是不可能的。 Less 不知道你的 HTML 文件的内容。

---

请注意，要使编译后的 CSS 真正起作用，您的 HTML 结构应该是正确的。在 CSS 中，只有满足以下任一条件时，您才能基于另一个元素设置一个元素的样式：

1. 要设置样式的元素 (#right) 是参考元素 (#left) 的子元素或孙子元素。我排除这种情况，因为如果它确实是一个孩子，那么#left 自动不为空。
2. 要设置样式的元素 (#right) 是引用元素 (#left) 的直接/直接下一个兄弟元素。如果是，请使用+ 选择器。
3. 要设置样式的元素 (#right) 是参考元素 (#left) 的同级元素（紧接下一个或不紧接下一个）。如果是，请使用~ 选择器。

如果以上都不是，那么您将无法单独使用 CSS 来实现所需的设置。需要 JavaScript 或任何其他库。

下面是一个关于选择器如何基于标记工作的演示 sn-p。

#left {
  background-color: red;
}
#left:not(:empty) {
  font-size: 20px;
  background-color: green;
}
#right {
  font-size: 15px;
}
#left:not(:empty) + #right {
  font-size: 23px;
}
#left:not(:empty) ~ #right {
  color: red;
}

<div id="left"> <!-- This is not empty -->
  <div id="right">Some text</div>
</div>
<div id="right">Some text</div> <!-- This is the immediate next sibling and a general sibling of the first #left-->

<hr>

<div id="left">Some other text</div> <!-- This is also not empty -->
<div id="right">Some text</div> <!-- This is the immediate next sibling for the second #left and is a general sibling of the first #left -->

<hr>

<div id="left"></div> <!-- This is empty -->
<div id="right">Some text</div> <!-- This is the immediate next sibling for the third #left and is a general sibling of the first and second #left -->