当前位置: 动力学知识库 > 问答 > 编程问答 >

css - Can a Less mixin apply special rules to certain element types?

问题描述:

I have a mixin for button styling that I apply to both button-styled a tags and actual button tags, but I'm using flexbox vertical centering and this is broken in some versions of Webkit.

For example, here's how I might do it in Stylus, but i need to accomplish the same thing in 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);

}

}

The above is how I'm doing it in Stylus but I am hoping to find another way to get around the Less limitation. I tried appending to the selector, for example, :not(:not(button)) but this doesn't seem to be supported by browsers .

网友答案:

Less (or any pre-processor) doesn't have any way to know what type of element is being represented by the selector and hence they cannot generate such rules without being specifically instructed by the developer. Also, Less doesn't support targeting a specific part of a parent selector and modifying it. So there is no direct conversion for the Stylus code given in question.


Having said that, there are a few alternate options that can be adopted to generate an output similar to that of the Stylus code.

Option 1: (Using CSS :not selector)

We can use the CSS :not (negation) selector to apply the flexbox styling only to .btn element that are not button elements.

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);
  }
}

This can't be written with the default display as flex because negation selector can be appended at the end whereas an element type selector cannot be. Below is a demo with the compiled 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>
分享给朋友:
您可能感兴趣的文章:
随机阅读: