Brandon Parker Brandon Parker - 1 month ago 7
Sass (Sass) Question

SCSS variables are rendered as browser hacks

I've configured stylelint to read SCSS and I keep getting browser hack warnings on SCSS items like

$variables
and
!default
. I loaded in the stylelint-scss plugin thinking this might fix it but it hasn't. I want the browser hacks rule to be enabled for true browser hacks but I'll have to turn this off if it fails on all of the SCSS items.

Does anyone know how I can keep the browser hack rule enabled but not have it fail on non-browser hacks like the standard variables for SCSS?

Answer

The no-browser-hacks rule is not compatible with SCSS syntax. This is documented in the rule's README.

I can think of three options available to you:

  1. Continue to use SCSS and turn off the no-browser-hacks rule.
  2. Continue to use SCSS and contribute SCSS compatibility to stylehacks (the underlying library that powers the rule). The author of the library is happy to accept a Pull Request for this.
  3. Discontinue using SCSS in favour of using standard CSS syntax and constructs.

Adding the stylelint-scss plugin will not resolve the issue as it provides additional rules specific to SCSS syntax and constructs. It does not change stylelint's core rules.