3

我有一个像这样的 Less 混合：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) {}
}

我想知道是否可以更改符号，以便&可以将参数中的 in 扩展到父选择器，就像我将它写在变量之外一样。

如果您单击 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)&删除（空格和＆符号）。

4

1 回答 1

4

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

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

我做了什么？

  1. 我将&参数混合参数区域移出。为什么？因为当您对字符串、变量或值进行转义时，它“按原样使用，除了插值之外没有任何变化”。这意味着您的＆符号将“按原样”保留，并且不允许根据需要引用父级。所以...
  2. 我将 & 符号从你的 mixin 参数移到你的 ID 的 CSS 中，所以 LESS 可以引用孩子的父母（并且可以以所需的方式编译）。
于 2015-11-16T14:28:16.593 回答