Sass Invalid CSS Error: "Expected Expression"

Sass Invalid CSS Error: expected expression

Based on your error message (error sass/test.sass) I can tell you're using the .sass extension for a Scss file. Change your file name to style.scss.

Sass and Scss use two different and incompatible syntaxes.

Sass Invalid CSS expected expression (e.g. 1px, bold), was %;

(100 / 3) + %

is meant to represent the third of 100 in percentage.

You can do something like this:

$width: percentage(100 / 3);

and then use $width.

node-sass invalid CSS

The syntax is incorrect for node-sass.

You have defined the font variable correctly in fonts.scss but you need to import the font file into your Nav.scss file if you haven't already with:

@import "PATH/fonts.scss";

You then just need to reference the variable like so:

font-family: $roboto;

SassError: Invalid CSS expected expression (e.g. 1px, bold)

Node-sass causes this problem to me too. I fixed it using sass instead of node-sass.

Just run npm install sass and should work.

Sass invalid css error on compile in live sass compiler

It looks like you're using the .sass file extension for index.sass for a scss file. You need to change it to use the scss file extension for it to compile.

See also:

Sass Invalid CSS Error: "expected expression"

Error when trying to use imported Sass variables

Use @import instead of @use and refer to $primary-color directly like this:

@import 'base';
.inverse {
  background-color: $primary-color;
  color: white;
}

Hope this helped.

SASS Invalid css error

SCSS uses $ to denote variables so it should be background-color: $blue;

Error: Invalid CSS, while converting SASS to CSS

Dart-based npm package dart-sass worked. Ruby-based Sass does not support @use usage.

Sass Invalid CSS: expected expression (e.g. 1px, bold), was {

Your code is actually SCSS, not SASS.

To make it work as SASS, you need to get rid of curly braces, semi-colons and add some spaces.

Here's the corrected code:

@each $flag in USA, EUR, JPN 

  a.#{$flag} 
    display:inline-block
    overflow:hidden
    width: 0
    height: 11px
    padding-left: 16px
    background: url('http://res.cloudinary.com/mrengy/image/upload/v1470163121/#{$flag}.gif') no-repeat

https://codepen.io/vic3685/pen/akaEyo?editors=1100

---

Related Topics