[FIXED] SassError expected selector

Introduction

A common error that can come up when you are working with SASS is the dreaded SassError expected selector.

This error can look something like this:

Invalid CSS after "$margin": expected selector or at-rule, was ": 16px"

Now what does that mean??

This just indicates that the you have a syntax error somewhere in your code.

In this post, I will go over the steps we can take to resolve this issue. I happen to have to deal with this pretty much on every SASS project I have worked with.

Make sure the syntax is correct

This SASS error typically happens when there’s an issue with the structure or syntax of your SCSS/SASS file.

Consider the following example:

.container {
  color: red;
}


.container {
  color: red
}

We can see that the second example for the .container is not correct due to a missing semicolon (;).

This is probably my top reason why I get this error - so many times I have forgot to add the semicolon in SASS!

Nested Selectors: If you’re using nested selectors, make sure they’re properly formatted. Each nested selector should be within its parent selector’s block. For example:

.container {
  .item {
    color: red;
  }
}

Verify characters

If you know that you did not miss any semicolons like the first step, we can move on to the next check - invalid characters.

Common issues include missing commas between selectors, typos in pseudo-class names, and unnecessary special characters.

.container$ { // $ is not valid in a class name
    color: red;
}

.container {
    &: hover; // Extra space after &:
}

Adding an extra space after the &: will cause an error because the SASS compiler will not recognize it as a pseudo-class.

In SASS the & character is used to refer to the parent selector in nested rules. So for example if you have SASS code like:

.selector {
  color: blue;

  &:hover {
    color: red;
  }
}

This will compile to:

.selector {
  color: blue;
}

.selector:hover {
  color: red;
}

Now this has a special meaning if you want to use CSS pseudo-classes like :hover.

The & character must not have space between & and :hover, ::before, ::after, etc

Unfinished values

Another reason could be that the SASS have unfinished values. Lets take a look at the following code:

.container {
    color: ; // Unfinished value
}

The above will give a error since the color property does not have a value.

Check for matching braces

Additionally, make sure all of your CSS blocks are properly opened and closed. Every opening bracket ({) should have a corresponding closing bracket (}).

.container {
    color: red;
  // Missing closing brace

Tips for node-sass

Now if you are using a old project that still relies on node-sass and you are also using webpack, we can come across the error:

./src/components/MenuBarComp.vue (./node_modules/css-loader/dist/cjs.js?
{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?
{"optionsId":"0","vue":true,"id":"data-v-4630c6ac","scoped":true,"sourceMap":true}!
./node_modules/sass-loader/dist/cjs.js?
{"additionalData":"/n          @import /"@/styles/_variables.scss/";/n        ","sourceMap":true}!
./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/MenuBarComp.vue)


Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected selector.
   ╷
77 │   & /deep/ .child-test{
   │     ^
   ╵
  src/components/MenuBarComp.vue 77:5  root stylesheet

Now the above issue is caused by the /deep combinator is not supported with Dart SASS.

The /deep/ combinator, a shadow-piercing descendant combinator used with the view encapsulation in Angular and Vue.js, is not supported by Dart Sass.

In the past, the /deep/ combinator was used to force a style down through the child component views all the way into all the child component views. This selector is deprecated and is not supported by Dart Sass.

To resolve this issue, you’re suggested to explicitly set your sass-loader to use node-sass, which still supports the /deep/ selector. You would do this in your webpack configuration file. Here’s how to do it:

First, ensure you have node-sass installed. If not, you can install it using npm:

npm install node-sass --save-dev

Then in your webpack configuration, set the sass-loader to use node-sass as its implementation. Here’s a simplified example based on your provided information:

const path = require('path');

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              implementation: require('node-sass'),
              additionalData: `
                @import "@/styles/_variables.scss";
              `,
            },
          },
        ],
      },
    ],
  },
};

This configuration tells webpack to use node-sass instead of Dart Sass when it encounters SCSS files.

Now keep in mind that node-sass is more or so legacy and the way forward as mentioned by the SASS team is to use Dart.

Summary

In this post we went over a few things to look out for when trying to fix the SassError expected selector error.

Generally what this error means is that we have syntax error somewhere in our SASS code.

A few things you can look out for includes checking the variable/function names - make sure that there are no invalid characters.

Check that there are no missing braces and that you have semicolons after each statement.