autoprefix scss files

[ilanbiala]

Is it possible to do autoprefixing on scss files, like on a mixins/config file?

[ScottSmith95]

Why not run autoprefixer on the output files? That seems to be the popular option.

[ilanbiala]

mixins are not compiled, only the styles that includes the mixins can be compiled. Is there any way to set up prefixing on scss files too?

[nDmitry]

No, and it doesn't make sense at all—you need to prefix only the compiled output that runs by browsers.

[ilanbiala]

If I have this mixin in a mixins.scss file that I import into index.scss, then the mixins are never in indesx.scss and so they aren't compiled.

@mixin parallelogram($width, $height, $skew) {
    @include rectangle($width, $height);
    -webkit-transform: skew($skew);
    -moz-transform: skew($skew);
    -ms-transform: skew($skew);
    -o-transform: skew($skew);
    transform: skew($skew);
}

Instead of writing out all the properties, why can I run autoprefixer on the mixins.scss file so that I only need to write transform: skew($skew);?

[ScottSmith95]

So mixins.scss + index.scss should be complied into a file like index.css. You should then run autoprefixer on index.css.

[nDmitry]

@ilanbiala that code in your mixin will be included in the output CSS at the place where you will use the mixin, so you can remove all prefixed properties from mixins.

@mixin parallelogram($width, $height, $skew) {
    @include rectangle($width, $height);
    transform: skew($skew);
}

div {
    @include parallelogram(10px, 10px, 40deg);
}

--> index.css

div {
    [whatever from rectange() mixin]
    transform: scew(40deg); /* here is the output from your mixin that will be prefixed */
}

--> index.prefixed.css

div {
    [whatever from rectange() mixin]
    -webkit-transform: scew(40deg); /* and so on */
    transform: scew(40deg);
}

[diestrin]

I have a problem with this one. Turns out that my company uses Adobe CQ5, and we can write styles on LESS, but we don't compile to css, CQ5 does that internally, so I wanted to know if there's any way to autoprefix the .less source code and not the compiled result.

Thanks

[nDmitry]

@diestrin I don't know the specific of Adobe CQ5, but Autoprefixer is based on PostCSS, which can parse CSS and nothing more. Grunt works with files, so you must have a CSS file to prefix it, but there are more tools that utilize Autoprefixer and you can write your own with Autoprefixer API: https://github.com/ai/autoprefixer#usage

There should be at least in-memory CSS that you can pass to Autoprefixer and possibly some file cache to serve compiled CSS to browsers, so nothing is impossible.