LESS CSS：选择器替代？

这是现有的一般CSS规则（原始文件）：LESS CSS：选择器替代？

.caption-top { 
    color: red; 
}

这是示意性的，因为在现实生活中的情况下，我需要.caption-top选择成为别的东西，要看具体情况。但我想使用一个变量而不是改变选择器的所有事件。例如，在一种情况下，它应该变成.field-name-field-caption-top。所以我这样做（封装文件）：

@caption-top: .field-name-field-caption-top; 
@caption-top { 
    color: red; 
}

这会产生一个都不能少解析错误。是否有另一种方法来建立一个规则来替代选择器？因此，对于上面的例子中，该规则将最后是这样的：

.field-name-field-caption-top { 
    color: red; 
}

其他信息

整点是不触及原有的css文件，因为它来自外界和意志被覆盖，而是包装它，并告诉更少如何用特定主题中使用的类替换现有的类。如果无法实现，则可接受的解决方案是以自动方式更改原始文件，例如，将所有出现的“.caption”替换为“@caption”（我在上面的代码示例中提到过）或者在开始时进行导入等等。然后使用一个包装器Less文件（了解主题实现）来指定哪些类需要被什么取代。

来源

2012-04-17 camcam

这不是[mixins]（http://lesscss.org/#-mixins）的用途吗？ – cchana 2012-04-17 11:31:29

我不知道。但是当你去[在线较少工具]（http://leafo.net/lessphp/#demo）并输入上面的代码时，会出现致命的解析错误。 – camcam 2012-04-18 12:12:46

看起来混入是你所需要的：

.caption-top { 
    color: red; 
} 
.field-name-field-caption-top { 
    .caption-top 
}

可以定义，使用与否，则可以一次又一次的其他选择中引用的类。你甚至可以用新的方式将它们结合起来，从而延长了什么CSS的原始块会做：

.field-name-field-caption-bottom { 
    font-size: 3em; 
    .caption-top 
}

给它的编译器一展身手！

来源

2012-04-18 13:12:50 cchana

您可以使用转义来实现这一目标：

@selector: '.myclass'; 

(~'@{selector}') { 
    color: red; 
}

但是你不能做到这一点：

(~'@{selector}') .another { 
    color: red; 
}

为实现上述您需要改变变量

@selector: '.myclass .another';

来源

2012-04-24 16:23:35

你怎么也可以使用'＆'？ '＆（〜'@ {selector}'）。另一个{}'不起作用。 – 2012-10-05 16:34:30

您需要生成一个生成所需CSS的两个参数的函数：

.generator(@fieldName, @fieldCaption) { 
    [email protected]{fieldName}[email protected]{fieldCaption}-top { 
    color: red; 
    } 
} 
.generator(foo, bar);

（随意尝试这在online less compiler）

这段代码产生用于与名称“foo”和标题“栏中的”元件所需的CSS。您只需使用不同参数拨打.generator函数的更多调用即可获得您所需的内容。

如果这不符合您的需要，请提供一个您想要的CSS输出的额外示例。

来源

2013-06-05 13:51:19

LESS CSS：选择器替代？

回答

相关问题