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

Question

我对 Less 还很陌生。

#left(id 选择器) 标签中有一些来自外部来源的动态内容。

这是我的 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 不为空，我的预期结果会是这样 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 */

As mentioned by seven-phases-max in comments, if you are expecting @not-empty: #left:not(:empty); to evaluate to a boolean true or false and use it like an if condition then it wouldn't be possible with Less. Less does not know the contents of your HTML file.

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

要设置样式的元素 (#right) 是参考元素 (#left) 的 child 或 grand-child。我 排除这种情况 因为如果它确实是 child 那么 #left 自动不为空。
要设置样式的元素 (#right) 是参考元素 (#left) 的 direct/immediate 下一个兄弟元素。如果是，则使用 + 选择器。
要设置样式的元素 (#right) 是引用元素 (#left) 的兄弟元素（无论是否紧邻）。如果是，则使用 ~ 选择器。

如果是上面的none，那么单独使用CSS是达不到要求的设置的。 JavaScript 或任何其他库都是必需的。

下面是关于选择器如何基于标记工作的演示片段。

#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 -->

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

Defining selectors to apply to the other styles

css

extend

css-selectors

less