Search code examples
csssasspostcssscss-mixinsstylelint

Error passing a list to a SASS mixin: "] expected"

I'm passing a list to a SASS mixin and it works (no error in the browser or console) but my editor (VS Code) says there are errors. The code is:

  @include gridAuto(
    320px, 
    [
      ['sm', 2],
      ['', 1],
      ['lg', 3],
    ],
    var(--space-xl), 
    var(--space-xxl)
  );

I get errors on this line ['sm', 2],. The errors:

] expected
] expected
) expected
at-rule or selector expected

These are the styles dependencies the starter theme is using:

"autoprefixer": "^9.4",
"css-loader": "^0.28.9",
"cssnano": "~4.0.5",
"node-sass": "~4.9.4",
"postcss-custom-properties": "^9.1.1",
"postcss-loader": "~2.1.0",
"postcss-safe-parser": "~3.0",
"sass-loader": "~6.0",
"style-loader": "^0.22.1",
"stylelint": "^8.4.0",
"stylelint-config-standard": "~18.2.0",
"stylelint-webpack-plugin": "^0.10.5",

I attach a screenshot enter image description here

Solution

  • It seems the SCSS validator built into VS Code is struggling to understand this construct. As you are using the stylelint extension for VS Code, you can turn off the built-in validator by adding the following to your user settings:

    "scss.validate": false

    (The stylelint extension itself doesn't have a problem with this construct.)