Question

我是Less的新手。

有一些来自外部来源的动态内容是#left（内容选择器）标记的一部分。

这是我的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。

我使用的是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 */

正如评论中的七阶段最大值所提到的，如果您期望@not-empty: #left:not(:empty);评估为布尔值true或false并将其用作if条件，那么就不可能减。 Less不知道HTML文件的内容。

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

要设置样式的元素（#right）是引用元素（#left）的子元素或子元素。我将此案件排除，因为如果它确实是一个孩子，那么#left自动不会为空。
要设置样式的元素（#right）是引用元素（#left）的直接/直接下一个兄弟。如果是，请使用+选择器。
要设置样式的元素（#right）是引用元素（#left）的兄弟（紧接着或不紧接）。如果是，请使用~选择器。

如果不是上述情况，则单独使用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 -->

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

1 个答案: