Closed OnkelTem closed 9 years ago
While this issue has no evident solutions, as the whole vendor prefixing stuff is missed in compass-mixins, I want to provide one workaround.
Suppose we have a code like this:
@include background(url('/build/images/i-plus.png') no-repeat center center, red);
And currently it generates this crap:
background: -owg-url("/build/images/i-plus.png") no-repeat center center, red;
background: -webkit-url("/build/images/i-plus.png") no-repeat center center, red;
background: -moz-url("/build/images/i-plus.png") no-repeat center center, red;
background: -o-url("/build/images/i-plus.png") no-repeat center center, red;
-pie-background: -pie-url("/build/images/i-plus.png") no-repeat center center, red;
background: url("/build/images/i-plus.png") no-repeat center center, red;
To get it produce something sensible, we need to remove all space-separated lists and provide removed properties later, for example:
@include background(url('image.png'), red);
background-repeat: no-repeat;
background-position: center center;
Now we get:
background: url("/build/images/i-plus.png"), red;
background: url("/build/images/i-plus.png"), red;
background: url("/build/images/i-plus.png"), red;
background: url("/build/images/i-plus.png"), red;
-pie-background: url("/build/images/i-plus.png"), red;
background: url("/build/images/i-plus.png"), red;
background-repeat: no-repeat;
background-position: center center;
which is of course weird (as it repeats the same stuff many times and has -pie- garbage) but at least it works.
Ok, forget about it. If you really want prefixes to start working - don't use background
and similar mixins just to get browser support. Instead use regular CSS stuff but pipe it through the beautiful https://github.com/postcss/autoprefixer
Original issue:
UPDATE
Actually even this simple code works incorrectly:
as it results to CSS code:
where
url
is prefixed. This happens becuase of theprefixed()
function:Which erroneously supposes that any list should be prefixed: