Error when complile : Unknown word with variable interpolation ( SASS )

[paallaire]

Example (Gulp):

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var sorting = require('postcss-sorting');

gulp.task('css', function () {
  return gulp.src('./assets/styles/_shame.scss').pipe(
    postcss([
      sorting({
        "properties-order": [
          "margin",
          "padding",
          "border",
          "background"
        ]
      })
    ])
  ).pipe(
    gulp.dest('./output')
    );
});

Example (SASS) :

$loader : ".loader";

#{$loader} {
  width: 50px;
  height: 50px;
  padding: 40px;
}

Error

events.js:182 throw er; // Unhandled 'error' event ^ CssSyntaxError: ...\styles_shame.scss:15:3: Unknown word

The problem seems to come with "#{$loader}". If on replace it with a CSS selector like ".loader"... its works

[hudochenkov]

It's because PostCSS doesn't understand SCSS by default. You need to use custom parser postcss-scss.

[davidetruffo]

Hi @hudochenkov I'm getting this exact same error, using the following files: postcss.config.js

module.exports = (ctx) => ({
  syntax: 'postcss-scss',
  plugins: {
    'postcss-sorting': {
      'sort-on-save': true,
      'no-invalid-double-slash-comments': false,
      'no-double-slash-css-comments': false,
      'order': [
        'dollar-variables',
        'at-rules',
        'custom-properties',
        'declarations',
        'rules'
      ],
      'properties-order': [
        'content',
        'order',
        'flex-grow',
        'flex-shrink',
        'flex-basis',
        'flex',
        'align-self',
        'display',
        'flex-direction',
        'flex-wrap',
        'flex-flow',
        'justify-content',
        'align-items',
        'align-content',
        'position',
        'top',
        'right',
        'bottom',
        'left',
        'z-index',
        'clear',
        'float',
        'box-sizing',
        'width',
        'min-width',
        'max-width',
        'height',
        'min-height',
        'max-height',
        'margin',
        'margin-top',
        'margin-right',
        'margin-bottom',
        'margin-left',
        'border',
        'border-width',
        'border-style',
        'border-color',
        'border-radius',
        'border-top',
        'border-top-width',
        'border-top-style',
        'border-top-color',
        'border-top-left-radius',
        'border-top-right-radius',
        'border-right',
        'border-right-width',
        'border-right-style',
        'border-right-color',
        'border-bottom',
        'border-bottom-width',
        'border-bottom-style',
        'border-bottom-color',
        'border-bottom-right-radius',
        'border-bottom-left-radius',
        'border-left',
        'border-left-width',
        'border-left-style',
        'border-left-color',
        'padding',
        'padding-top',
        'padding-right',
        'padding-bottom',
        'padding-left',
        'vertical-align',
        'overflow',
        'overflow-x',
        'overflow-y',
        'overflow-wrap',
        'overflow-scrolling',
        'clip',
        'visibility',
        'background',
        'background-color',
        'background-image',
        'background-repeat',
        'background-attachment',
        'background-position',
        'background-clip',
        'background-origin',
        'background-size',
        'color',
        'opacity',
        'box-shadow',
        'filter',
        'font',
        'font-style',
        'font-weight',
        'font-size',
        'font-family',
        'font-smoothing',
        'src',
        'line-height',
        'text-indent',
        'text-align',
        'text-decoration',
        'text-transform',
        'text-shadow',
        'text-overflow',
        'text-size-adjust',
        'letter-spacing',
        'word-spacing',
        'white-space',
        'list-style',
        'caption-side',
        'table-layout',
        'empty-cells',
        'cursor',
        'outline',
        'pointer-events',
        'animation'
      ]
    }
  }
})

in package.json:

...
"scripts": {
  "sort": postcss -c postcss.config.js --no-map -r --verbose ./src/styles/**/**/*.scss`
}
...

error in console:

CssSyntaxError: styles/carousel.scss:4:9: Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser

  2 | $glue: 'testing';
  3 |
> 4 | .test-#{$glue} {
    |         ^
  5 |   color: pink;
  6 | }

[hudochenkov]

@davidetruffo do you have postcss-scss installed?

[davidetruffo]

@hudochenkov Yep, I did have it.

I'm using past tense here, because I then switched to stylelint (and stylelint-order). I'm already using stylelint for linting and there's not much sense in using different tools with different configs when I can accomplish everything I need with one :)