如何使用选择器为 LESS 变量赋值答案

【问题标题】：How to assign value to LESS variable using selector如何使用选择器为 LESS 变量赋值
【发布时间】：2012-03-31 14:26:39
【问题描述】：

由于 LESS 是一种预编译样式表语言，这可能无法实现我所追求的，但想法是：

#sidebar {
     width: 40%;
 }

@sidebar_width : @('#sidebar:width');

.some_other_elements {
      width: @sidebar_width;
 }

所以我有三个问题：

上述情况可能吗？我刚刚发现 LESS，文档让我晕车。
如果上述情况可行，它是否会生成将.some_other_elements 设置为 40% 或侧边栏实际宽度的 CSS？是否可以使用 LESS 获得实际宽度？
如果您能给出您对图书馆的总体看法以及答案或评论，我很想听听。看起来有点多，但也许它是下一个 jquery，我需要尽快采用它（或者相反，也许它是下一个 YUI，我应该忘记我曾经见过它）。

【问题讨论】：

标签： less

【解决方案1】：

那是行不通的。您不能从选择器中挑选出值并将其转换为变量：您必须执行以下操作：

@sidebar_width: 40%;
.some_other_elements {
  width: @sidebar_width;
}

侧边栏的宽度将设置为父容器宽度的 40%。

【讨论】：

我害怕那个。我认为获得后编译的值不是一个选项，因为它是一个预编译器，但我很惊讶你不能传递它选择器，因为这将有助于制作独立于任何基本 css 的 css 主题（ UA 或图书馆）。谢谢。

【解决方案2】：

虽然如果您预编译这是正确的，但请记住，LESS 确实允许您访问 JS 环境。因此，如果您使用 Node 编译服务器端，您可以执行类似于您正在尝试的操作，因为您可以访问文档的某些部分。如果您使用 .js 在加载时对其进行编译，它甚至可能会起作用（尽管出于各种原因我不建议这样做）文档中的示例：

@height = `document.body.clientHeight`;

对于您要完成的工作，可能值得研究。

【讨论】：