Question

我有一个像这样的Less mixin：http://codepen.io/sirlancelot/pen/QjzzEb?editors=110

// The mixin to toggle containers
#toggle-container(
    @collapsed-selector: ~"&.__collapsible .section--body",
    @expanded-selector: ~"&.__open .section--body"
) {
    @{collapsed-selector}:extend(#section--collapsed) {}
    @{expanded-selector}:extend(#section--expanded) {}
}

我想知道是否可以更改符号，以便参数中的&可以扩展到父选择器，只要我将其写在外面就可以了变量。

如果您点击＆＃34;查看已编译＆＃34;在Codepen的CSS部分中，您将看到&正在直接输出：

#section--collapsed,
.section &.__collapsible .section--body {
    transition: transform ease 250ms;
    transform: scaleY(0);
    transform-origin: top;
    position: absolute;
    width: 100%;
    z-index: 1;
}
#section--expanded,
.section &.__open .section--body {
    transform: scaleY(1);
    position: static;
}

我希望删除(space)&（空格和＆符号）。

Answer 1

您可以获得所需的结果，但不能在参数mixin参数中包含&。相反，你需要稍微移动一下：

#toggle-container(
    @collapsed-selector: ~".__collapsible .section--body",
    @expanded-selector: ~".__open .section--body"
) {
    &@{collapsed-selector}:extend(#section--collapsed) {}
    &@{expanded-selector}:extend(#section--expanded) {}
}

我做了什么？

我将&移出参数mixin参数区域。 为什么？因为当您escape a string, variable, or value时，“按原样使用，除了interpolation 之外没有任何更改。”这意味着您的＆符号将“按原样”保留，并且不允许您根据需要引用父级。因此...
我将你的mixin参数中的＆符号移到了你的ID的CSS中，所以LESS可以引用孩子的父级（并且可以用所需的方式编译）。

如何更换＆＃34;＆amp;＆＃34;使用父选择器的Less变量？

1 个答案:

我做了什么？