LESS 问题（范围和显式节点名称）

Question

有没有办法绕过 LESS 范围？它变得烦人了。基本上，我有一个定义背景、边框等的 .text-box 。然后，在一个小节中进行一次性更改以添加 margin-top: .text-box { margin-top: 10px }。现在我无法在该部分中使用 .text-box 并获取原始的框样式；相反，我得到的只是边距顶部。如何才能在层次结构中获得更高的定义？我想我可以让它成为一个函数，并在两个地方调用该函数，但由于我使用的是 LESS，所以我想做更少的事情并 KISS。在 PHP 中，您可以使用 / 前缀访问全局命名空间，或者在 C++ 中使用 :: 前缀。

此外，似乎任何带有节点名称的定义都不适用于原型设计。意思是，我不能将其声明为 ul.products，然后使用 ul.categories { ul.products }。我必须省略节点名称才能重新使用它。含义：.categories {.products}。这是疏忽/不可能吗？

谢谢

Answer 1

好吧，假设您已经定义了 mixin，例如：

.text-box {
    background: #eee;
    border: 1px solid #ccc;
    color: #333;
    margin-top: 5px;
}

现在您想要添加属性或在某个小节中修改它，然后只需执行以下操作：

div.content {
    div.sub_section {
        .text-box;
        margin-top: 10px; // this will override 5px defined in the mixin.
    }
}

...将您的 mixin 放置到位，并添加一些您需要的属性添加（这将覆盖 mixin 本身的任何属性，但请确保在调用 mixin 后定义覆盖属性。

这不是理想的解决方案，因为它在输出 css 文件中创建两个声明（将有一个来自 mixin 的声明，后跟你在 .sub_section 中定义的那个），但除此之外，除了定义参数混合之外，我不知道这个问题的解决方案。

-

你的第二个问题 - 我认为 less 不故意支持范围有限的定义。 ..如果你真的需要知道特定标签要使用某些mixin，我会像这样处理它：

.ul_products   { ... }
.ul_categories { .ul_products; ... }

ul.categories { .ul_categories; }

你还可以定义一个包并从那里调用东西：

#ul {
  .products   { ... }
  .categories { ... }
}

ul.categories { #ul > categories; }

我希望我做对了..？