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+.