Question

我有一个用于按钮样式的mixin，我应用于按钮样式的a标签和实际button标签，但我使用 flexbox 垂直居中这在某些版本的Webkit中已被破坏。

例如，这是我在Stylus中如何做到这一点，但我需要在Less中完成同样的事情：

.container {  
  btn(width) {
    display: flex;
    flex-direction: column;
    width: width;
    height: 50px;

    // How can I do this part, somehow, in Less?
    ../ button^[1..-1] {
      display: inline-block;
    }
  }

  .btn {
    btn(100px);
  }
}

以上是我在Stylus中的表现，但我希望找到另一种方法来解决Less限制。我尝试添加到选择器，例如，:not(:not(button))，但浏览器似乎并不支持。

Answer 1

Less（或任何预处理器）没有任何方法可以知道选择器正在表示什么类型的元素，因此如果没有开发人员的具体指示，他们就无法生成这样的规则。此外，Less不支持定位父选择器的特定部分并对其进行修改。因此，没有直接转换所讨论的Stylus代码。

话虽如此，可以采用一些备用选项来生成类似于Stylus代码的输出。

选项1：（使用CSS :not选择器）

我们可以使用CSS :not（否定）选择器将flexbox样式仅应用于不是.btn元素的button元素。

The support for :not is available in latest versions of all browsers and IE supports it from 9+.

.container {  
  .btn-mixin(@width) {
    display: inline-block; /* default display is inline block */
    width: @width;
    height: 50px;
    &:not(button){ /* override for elements that are not buttons */
      display: flex;
      flex-direction: column;
    }
  }
  .btn {
    .btn-mixin(100px);
  }
}

这不能用默认显示作为flex写入，因为可以在末尾附加否定选择器，而元素类型选择器不能。下面是一个带编译CSS的演示。

.container .btn {
  display: inline-block;
  width: 100px;
  height: 50px;
}
.container .btn:not(button) {
  display: flex;
  flex-direction: column;
}

<div class="container">
  <a href='#' class='btn'>Hello!</a>
  <a href='#' class='btn'>we</a>
  <a href='#' class='btn'>are</a>
  <a href='#' class='btn'>some</a>
  <a href='#' class='btn'>links</a>
</div>
<div class="container">
  <button class='btn'>Hello!</button>
  <button class='btn'>we</button>
  <button class='btn'>are</button>
  <button class='btn'>some</button>
  <button class='btn'>buttons</button>
</div>

选项2：（使用Less参数化的mixins）

不是我推荐的选项 。在我看来，选项1更直接，更简单。我把这个扔进答案只是为了表明可以在Less中实现条件行为。它使用警卫功能检查参数（@elType）的值，然后应用样式。

.container {  
  .btn-mixin(@width; @elType: anchor) {
    & when not (@elType = anchor){
      display: inline-block;
    }
    & when (@elType = anchor){
      display: flex;
      flex-direction: column;
    }
    width: @width;
    height: 50px;
  }
  .btn {
    .btn-mixin(100px);
  }
  button.btn {
    .btn-mixin(200px, button);
  }
}

为什么不 :not(:not(button)) 有效？

此选择器不起作用（尚未至少），因为截至目前，negation :not selector accepts only simple selectors as arguments。 :not(button)（这是外部否定的参数）不是一个简单的选择器。

Less mixin可以对特定元素类型应用特殊规则吗？

1 个答案: