Autoprefixer not generating prefixes for sass with variables

[vanitabarrett]

Using version 9.8.5
Prefixes are generated fine if $ratio is replaced with a fixed numeric value, e.g: 2. Not sure if this is intended behaviour or not?

Input SASS

@mixin govuk-device-pixel-ratio($ratio: 2) {
  @media only screen and (min-resolution: $ratio*96dpi),
    only screen and (min-resolution: $ratio*1dppx) {
      @content;
    }
}

Output SASS

@mixin govuk-device-pixel-ratio($ratio: 2) {
  @media only screen and (min-resolution: $ratio*96dpi),
    only screen and (min-resolution: $ratio*1dppx) {
      @content;
    }
}

Expected output SASS

@mixin govuk-device-pixel-ratio($ratio: 2) {
  @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
    only screen and (min-resolution: $ratio*96dpi),
    only screen and (-webkit-min-device-pixel-ratio: $ratio),
    only screen and (min-resolution: $ratio*1dppx) {
      @content;
    }
}

Config

  // browserlist
  "browserslist": [
    ">0.1%",
    "last 2 Chrome versions",
    "last 2 Firefox versions",
    "last 2 Edge versions",
    "last 2 Samsung versions",
    "Safari >= 9",
    "ie 8-11",
    "iOS >= 9"
  ]

 // gulp task
.pipe(scssFiles)
.pipe(postcss([
      autoprefixer
    ], {
      syntax: require('postcss-scss'),
    }))

[ai]

Sorry, Autoprefixer was not created to process SCSS sources.

We can do it but without the ideal result.

Possible solutions:

1. You can send pull request. I will not have time to support SCSS but will ask to your questions if you will try to add the support.
2. You can add Autoprefixer after the SCSS to CSS compilation step. This is the main easy to use Autoprefixer.

[Dan503]

You should use gulp-sass to compile the sass into CSS for you then pipe gulp-postcss after it to run Autoprefixer.