[FIXED] SassError expected identifier

Introduction

Recently I was working on a Vue project and made a quick upgrade for vuetify (a UI library for vue projects).

I got hit with this error:

SassError expected identifier

So what does this error MEAN?

Generally this means that your SASS code is not correct syntactically or that your variable/ function names are not valid.

In this post I will go over how to address this.

The error I got looked something like this:

ERROR in ./node_modules/vuetify/src/styles/main.sass (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-1-3!./node_modules/sass-resources-loader/lib/loader.js??ref--6-oneOf-1-4!./node_modules/vuetify/src/styles/main.sass)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Expected identifier.
   ╷
34 │         .v-application .red.#E82550{
   │                             ^
   ╵
  node_modules/vuetify/src/styles/generic/_colors.scss 34:29  @import
  node_modules/vuetify/src/styles/generic/_index.scss 2:9     @import
  node_modules/vuetify/src/styles/main.sass 38:9              root stylesheet

In my case, it wasn’t even my fault. The author of Vuetify introduced a bug so I had to revert back to the old versions of the package.

Possible scenario

So why would this even come up if it was in your code?

Lets say that we want to generate a list of background colour classes. So I would do something like this:

%bg-#{$color}

So we wanted a range of bg classes such as: bg-red, bg-blue, bg-green, etc

This use of the #{...} syntax is known as interpolation, and it takes the value of $color and inserts it directly into the selector name.

Now the problem will come if $color contains a hexadecimal color value like #XXXXXX, the resulting class name would look like this: .bg-#XXXXXX.

However, CSS class names cannot contain the ‘#’ character, which is typically used to denote IDs in CSS, so this is an invalid identifier.

To fix this issue is to strip the ‘#’ character from the color value before using it in the class name. This is done using the str-slice() and inspect() functions:

$stripped-color: str-slice(inspect($color), 2);

Here, inspect($color) converts the color value to a string, and str-slice(inspect($color), 2) removes the ‘#’ character from the string by returning a substring that starts from the second character.

Then, $stripped-color can be used safely in the class name:

%bg-#{$stripped-color} {
    background-color: $color;
}

Now, even though the class name no longer includes the ‘#’ character, the actual color value, stored in $color, is still being used as the background-color.

This ensures that the correct color is applied without causing any syntax errors.

What is a valid identifier in SASS anyway?

An identifier in SASS can be a variable, function, or mixin name, and it must follow specific naming rules. These are similar to the rules for identifiers in many other programming languages:

Start with a letter or underscore: The first character of an identifier can be a lowercase or uppercase letter, or an underscore (_).

// Valid identifiers
$valid-variable: #333;
$AnotherValidVariable: #999;
$_valid_variable: #fff;

// Invalid identifier
// $123-invalid: #f00; // This will cause an error

Subsequent characters can be letters, underscores, or numbers: After the first character, you can use any combination of letters, numbers, or underscores.

// Valid identifiers
$variable1: #333;
$Variable_number2: #999;
$variable_number_3: #fff;

// Invalid identifier
// $invalid-variable!: #f00; // This will cause an error

Case-sensitive: Identifiers are case-sensitive. This means $myVariable and $myvariable are considered different identifiers.

// These are two different variables
$myVariable: #333;
$myvariable: #999;

No special characters: Other than underscore, no special characters are allowed. This includes spaces, hyphens, and other punctuation marks.

// Invalid identifiers
// $invalid variable: #f00; // This will cause an error
// $invalid-variable: #f00; // This will cause an error
// $invalid@variable: #f00; // This will cause an error

The same rules apply to function and mixin names in SASS. It’s also good practice to give your identifiers meaningful names that reflect what they represent.

Note: While you can technically start a variable name with an underscore, such variables are considered “private” in SASS. They won’t be included in the generated CSS if you use the @use rule to import a SASS file.

Tip: Revert to a older version of SASS

In my case, the problem was due to an external bug with Vuetify. So all I had to do was to revert to the old version of SASS.

Syntax Error: SassError: Expected identifier.
      ╷
   68 │       position: relative
      │                         ^
      ╵
  node_modules\vuetify\src\components\VSelect\VSelect.sass 68:25  root stylesheet

Running the following command in NPM to revert to SASS version 1.32.8

npm install sass@1.32.8

Check your SASS syntax

Misplaced or missing semicolons (;) or brackets ({ or }): Each statement in SASS should end with a semicolon, and blocks of code should be enclosed in curly brackets.

// Correct syntax
$my-color: #f00;  
.my-class { 
    color: $my-color; 
}

The below shows examples of incorrect syntax.

$my-color: #f00
.my-class 
    color: $my-color

Summary

Generally, the error SassError: Expected Identifier comes up when you named your variables or functions incorrectly.

This could be that your variable has invalid characters eg - numbers or hashes in the front.

I would stick to simple alphabetical variable or function names. This way it avoids syntax errors like this and that it can be more descriptive for whoever is going to maintain your project.

Now if you know that your syntax is correct it could just mean that there was a bug with an external library. In my case I had to revert to a older version of SASS until the bug was resolved and published a new version.