Auto Prefix replacement

A really popular issue is the ability to have variable properties… but the main/only use-case I’ve seen is prefixes.

I saw that stylus supports automatically expanding properties with prefixes…

For cases where the syntax is different we suggest people use a mixin for that property and alter the arguments to work with different versions.

For cases where the syntax is the same, I suggest we have

-*-gradient: blah;

which is transformed to a set of prefixes

-webkit-gradient: blah;
-ms-gradient: blah;
-mozilla-gradient: blah;

which can be overridden with a option

--prefixes=ms,webkit

[matthew-dean]

Based on the fact that we’re going to move forward with variable interpolation within properties, then, as has been mentioned, I think this is now solved. Because you will essentially be able to do this.

@prefix-moz: true;
@prefix-webkit: true;

.moz-prefix(@prop, @value) when (@prefix-moz) {
  -moz-@{prop}: @value;
}
.webkit-prefix(@prop, @value) when (@prefix-webkit) {
  -webkit-@{prop}: @value;
}
.border-radius(@radius) {
  .webkit-prefix("border-radius", @radius);
  .moz-prefix("border-radius", @radius);
  border-radius: @radius;
}
.box {
  .border-radius(10px);
}

That’s all the control and configuration you need in the world. Putting vars into properties was really only the missing step. So closing.

[seven-phases-max]

@bassjobsen This was (relatively) recently discussed once more in still open #1917.