Question

我想使用＆amp;附加一个伪：不是父类，但是当使用mixins和变量选择器时我不知道怎么做。

.hideElement(@selector, @maxWidth) {
  @media (max-width: @maxWidth) {
    @{selector} {
      display: none;
    }
  }
}

.jp-sleek.jp-audio:not(.jp-state-no-volume-support) {
  .hideElement(~':not(.jp-state-full-screen) .jp-title-container', 580px);
}

我想要的输出是：

.jp-sleek.jp-audio:not(.jp-state-no-volume-support):not(.jp-state-full-screen) .jp-title-container {
  display: none;
}

当前输出是（注意：not中的空格）：

.jp-sleek.jp-audio:not(.jp-state-no-volume-support) :not(.jp-state-full-screen) .jp-title-container {
  display: none;
}

我知道我需要使用＆amp;选择器，但这不起作用：

.hideElement(~&':not(.jp-state-full-screen) .jp-title-container', 580px);

我该怎么做？

上下文的完整代码：

.jp-sleek.jp-video,
.jp-sleek.jp-audio.jp-state-no-volume-support {
  .hideElement(~'.jp-repeat', 400px);
  .hideElement(~':not(.jp-state-full-screen) .jp-title-container', 530px);
  .hideElement(~'.jp-download', 580px);
}

.jp-sleek.jp-audio:not(.jp-state-no-volume-support) {
  .hideElement(~'.jp-full-screen', 400px);
  .hideElement(~'.jp-repeat', 450px);
  .hideElement(~':not(.jp-state-full-screen) .jp-title-container', 580px);
  .hideElement(~'.jp-download', 630px);
}

Answer 1

.gitignore:133:Icon icon/test1.png不能用作mixin的参数，也不能用作mixin的参数的一部分。当以这种方式使用时，&将没有特殊含义。它不会解析为父选择器，只会保持为&。另外，以下行不正确，因为&必须后跟~。

我强烈建议您查看seven-phases-max in his comment建议的替代方法。但是，在保留代码库的同时解决问题的一个非常简单的解决方案如下。只需取出.hideElement(~&':not(.jp-state-full-screen) .jp-title-container', 580px);部分，将其作为自己的块，然后在此块中调用&:not(...) mixin，只选择选择器的其他部分（子选择器）作为输入。

.hideElement

使用＆amp;和选择器中的变量较少

1 个答案: