Less中带有变量的多个嵌套选择器

Posted 2023-03-06

【中文标题】Less中带有变量的多个嵌套选择器

【英文标题】：multiple nested selectors with variables in Less

【发布时间】：2014-08-15 22:34:47

【问题描述】：

我想按照这些思路构建一些 CSS：

h1,h2,h3,h4,h5,h6 some rule
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a color: inherit;
h1 span,h2 span,h3 span,h4 span,h5 span,h6 span another rule;

如果我可以创建这样的变量会很有用：

@headings: h1,h2,h3,h4,h5,h6;

然后可能做这样的事情：

@headings 
  & a color: inherit;

不幸的是，这给了我：

h1, h2, h3, h4, h5, h6 a 
  color: inherit;

我想要的可能吗？这是我想做的一个简单版本，但我也发现它对于处理 html 输入类型和其他经常一起出现的多个选择器的实例很有用。

【问题讨论】：

参见***.com/a/23954580/2712740 解决方案#3。

Build list of selectors with LESS的可能重复

谢谢，不幸的是，这似乎与我的问题相反，并给了我 h1 a , h1 span rule 而不是 h1 a,h2 a,h3 a,h4 a,h5 a,h6 a 规则 h1 span,h2 a,h3 a,h4 a,h5 a,h6 a 另一个规则;

嗯，它实际上是完全一样的代码，可以给你你需要的东西（它可能看起来太神秘而无法理解如何正确使用它）。还谈到h1 span, h2 a, h3 a ... - 我认为这是一个错字，因为@headings ... 无法提供这样的输出（即使它可以那样工作）......即对于h1 span, h2 a, h3 a ...，您必须将h1 和h2, h3, ... 分开。

【参考方案1】：

#1 除了@helderdarocha 的答案和https://***.com/a/23954580/2712740 中给出的答案之外，还有一种解决方案。也许这个看起来会更清楚一点：

// define header list as usual just
// put a mixin call with some predefined name there
h1, h2, h3, h4, h5, h6 .headings

// now to add styles/childs to the header list just add the mixin definitions:

.headings() 
    some: rule;


.headings() 
  a color: inherit


.headings() 
  span another: rule


// etc.

此方案的局限性在于h1, h2, h3 ... 和.headings 应定义在同一级别。此外，重要的是要记住，所有这些样式都将在h1, h2, h3 ... 定义点而不是.headings 定义点输出到 CSS，因此如果您有一些可能会破坏您的级联覆盖）。

---

#2 替代品。解决方案我从https://***.com/a/23954580/2712740 #3 复制粘贴，基本上它与 #1 相同，但没有限制（只是有更多特殊的可怕符号）：

// the "variable":
.headings(@-) 
    h1, h2, h3, h4, h5, h6
        @-();


// usage:

.headings(
    some: rule;
);

.headings(
    a color: inherit
);

.headings(
    span another: rule
);

//etc.

【讨论】：

以防万一我再次假设h1 span,h2 a,h3 a,h4 a,h5 a,h6 a another rule; 是一个错字（这样写，而不是为@headings 硬编码if (h1) ... else ...，如果与纯CSS @ 相比，这看起来像是血淋淋的过度工程。 987654332@.

你是对的，将跨度复制并粘贴到其他位是失败的。我想使用一种可以在几个地方使用的简单方法，这是一个简单的示例，但我认为它在我目前必须在多个地方指定不同的输入类型（如密码和数字）的表单代码中很有用。明天早上我的大脑稍微清醒一点时，我会看看解决方案。

感谢大家的回答。 Seven-phases-max 的第一个答案是我要走的路。我是 CSSer 而不是 javascripter，所以这对我来说更容易理解，并且代码需要在几个月内让上帝知道谁知道，他们也可能不明白更复杂的东西发生了什么。跨度>

【参考方案2】：

使用规则集

如果您将标题组定义为 ruleset 并使用 mixin 调用来设置属性，那么您可以这样做：

@headings: h1,h2,h3,h4,h5,h6 .setProps();


& 
    .setProps() 
        & 
            some: rule;
        
        a 
            color: inherit;
        
        span 
            another: rule;
        
    
    @headings();

我已经隔离了& 中的整个内容，以便可以本地化.setProps()（没有它也可以工作，但它将全局设置.setProps()。此外，嵌套的& 括号是没有必要，但我发现它有助于显示 @headings 的“默认值”。

如果需要，可以按顺序使用，如下所示：

& 
    .setProps()   some: rule; 
    @headings();

& 
    .setProps()  a color: inherit;
    @headings();

& 
    .setProps()  span another: rule;
    @headings();

两者都会像这样输出：

h1,
h2,
h3,
h4,
h5,
h6 
  some: rule;

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a 
  color: inherit;

h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span 
  another: rule;

【讨论】：

很抱歉破坏了它，但似乎这种方式比使用纯分离规则集更复杂（即如 ***.com/a/23954580/2712740 解决方案 #3 中所示）。通常，如果您已经决定使用分离规则集（只是因为分离规则集本身可以用作回调），则通常不需要“回调混合” .

@seven-phases-max：并不是真正的剧透，因为我同意您在该解决方案中的#3 更好（并且不那么“复杂”，尽管可能不那么直观地“明显”正在发生的事情)。我在这里提供这个只是因为它仍然是一种不同的方式。我倾向于提供尽可能多的选项，让用户决定他们认为最适合自己情况的选项。

【参考方案3】：

如果你有这些变量和选择器：

@headings: h1,h2,h3,h4,h5,h6;

@headings 
    some-rule: rule;    

.headings  // this is a placeholder
    color: inherit;

h1 span 
    other-rule: rule;

你可以使用这个 mixin 来生成你想要的代码：

.mixin(@headings; @count) when (@count > 0) 
    .mixin(@headings; @count - 1);
    @heading: extract(@headings, @count);
    @heading
        & a:extend(.headings) 
        & a:extend(h1 span) when not (@heading = h1) 
    

调用：

.mixin(@headings, length(@headings));

将生成：

h1, h2, h3, h4, h5, h6 
  some-rule: rule;

.headings,
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a 
  color: inherit;

h1 span,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a 
  other-rule: rule;

【讨论】：

让我完全困惑的是h1 .. h6 a 生成h1 a .. h6 a，正如人们所期望的那样，但@headings: h1 .. h6; @headings a 做了完全不同的事情。我想知道这是否只是 LESS 变量插值的那些神秘怪癖之一。

这只是因为插值变量总是被解释为单个选择器元素，这是因为此时无法知道它是否没有从头开始重新解析变量的值。 Less 在设计上是一次性编译器，因此当您需要重新解析某些内容时，每个特殊情况都会让人头疼（需要一堆新代码）（从历史上看，它是延迟加载的背面）。