Remove vendor prefixes from Sass

[pdehaan]

Ref #275

idea_town/frontend/static-src/styles/_theme-helpers.scss
  49:16  warning  Indentation of 15, expected 2       indentation
  50:16  warning  Indentation of 15, expected 2       indentation
  51:16  warning  Indentation of 15, expected 2       indentation
  61:11  warning  Vendor prefixes should not be used  no-vendor-prefixes
  62:5   warning  Indentation of 4, expected 0        indentation
  63:5   warning  Indentation of 4, expected -2       indentation
  63:6   warning  Vendor prefixes should not be used  no-vendor-prefixes
  64:5   warning  Indentation of 4, expected -4       indentation
  65:5   warning  Indentation of 4, expected -6       indentation
  66:7   warning  Indentation of 6, expected -4       indentation

✖ 10 problems (0 errors, 10 warnings)

Not sure what to do here. The indentation warnings here seem like a bug in multiline rules and Sass Lint.

As for no-vendor-prefixes, this is for media query stuff, so not sure if we leverage Autoprefixer to give us prefixes or if we find some mixin to add media queries, or find if there is an way way to ignore specific Sass Lint rules in specific files/blocks to suppress these warnings.

[pdehaan]

Ref: sasstools/sass-lint#426

Maybe we can just ignore the no-vendor-prefixes and indent rules for this specific mixin since we know what we're doing.

[pdehaan]

Another option may be to use something like the sass-mediaqueries mixin.

.brand {
  background-image: url(logo.png);

  @include hdpi {
    background-image: url(logo_2x.png);
  }
}

Plus seems to have some other nice media query functions.

[KittyGiraudel]

If you are on the hunt for a Sass Media-Query manager, I would suggest either Breakpoint or Include-Media. Both simple APIs. :)

[pdehaan]

I was looking at this again today and a third option came to mind if we want to suppress the sass-lint warnings. Move the hidpi code into its own module (_hidpi.scss) and then just ignore that file from sass-linting (via gulpfile glob):

_hidpi.scss

// Image Manangement
@mixin hidpi-background-image($filename, $background-size: 'mixed', $extension: png) {
  background-image: url('../images/#{$filename}.#{$extension}');
  @if ($background-size != 'mixed') {
    background-size: $background-size;
  }
  @media (min--moz-device-pixel-ratio: 1.3),
    (-o-min-device-pixel-ratio: 2.6/2),
    (-webkit-min-device-pixel-ratio: 1.3),
    (min-device-pixel-ratio: 1.3),
    (min-resolution: 1.3dppx) {
      background-image: url('../images/#{$filename}@2x.#{$extension}');
    }
}

---

gulpfile.js

gulp.task('sass-lint', function sassLintTask() {
  return gulp.src([
      SRC_PATH + '/styles/**/*.scss',
      '!' + SRC_PATH + '/styles/_hidpi.scss'
    ])
    .pipe(sassLint())
    .pipe(sassLint.format())
    .pipe(sassLint.failOnError());
});

[johngruen]

Fixed by #472