I am updating some SASS files to accommodate the division update, and running into an issue with the code.
Current code:
$spacer: 1rem !default;
$headings-margin-bottom: math.div($spacer, 2) !default;
This results in the following error in VSStudio 2019, using Web Compiler extension (1.12.394):
Invalid CSS after "...bottom: math": expected expression (e.g. 1px,
bold), was ".div($spacer, 2) !d"
I have tried researching this, but haven't found anything yet that helps. Any help would be greatly appreciated.
Check your environment and make sure that you are using sass package not node-sass or other flavors.
Also, make sure your sass version is higher than v1.33.0.
Related
this is a strange error that I don't understand at all. I usually search and seek the answer before posting it on StackOverflow. So the problem is that I would like to use the variables that I imported from another scss file called _variables.com using #use. This is written in scss-lang.com#use. The way I try to use my variable:
_variables.scss
$secondary-color: #CEA44A;
style.scss
#use '../../variables';
.foo {
background-color: variables.$secondary-color;
}
// ERROR TEXT
Invalid CSS after "...olor: variables": expected expression (e.g. 1px, bold), was ".$secondary-color;"
on line 19 of sass/c:\Users\Amirreza Amini\Desktop\blog\src\Components\Register\Register.scss
background-color: variables.$secondary-color;
Use Live Sass Compiler by Glenn Marks
I had exactly the same problem. You read about #use on SASS official website, follow the instructions, write the code in Visual Studio Code and then you get this strange Compilation Error when saving the SASS or SCSS file. You double check everything and it seems like it should work but it doesn't.
Well, the problem is caused by the Visual Studio Code extension you are using for compiling SASS or SCSS files to CSS files.
Don't use this extension: Live Sass Compiler by Ritwick Dey
You are probably using this extension: Live Sass Compiler by Ritwick Dey.
It's widely used, but no longer supported by the author. Consequently, the SASS version isn't updated. This extension produces the error you are describing as you can see below.
Use this extension: Live Sass Compiler by Glenn Marks
You should use this extension: Live Sass Compiler by Glenn Marks. As the author states: A big thank you to #ritwickdey for all his work. However, as they are no longer maintaining the original work, I have released my own which has built upon it. This extension compiles your SASS or SCSS files to CSS files successfully as you can see below.
change #use '../../variables'; to #use '../../variables' as *;
I've tried to write SCSS in my Maven project with React in IDEA. I have sass and sass-loader in npm packages. But I always get a weird error:
Syntax error: missing semicolon
This is a very simple scss example for test. I can't use other tag selectors as well. I've added scss variable on the top to see if it causes an error but it doesn't and all the errors stop at tags. I think that means that scss file is readable after all. And everything is ok when using just css. What's going on?
I solved the problem. Maybe someday it would be useful for somebody.
The point is I missed restarting webpack when changing it. I found configs for sass-loader on its npm page and added it to my webpack.config.js and then run webpack --watch --progress. Everything finally worked
I've npm installed the latest node-sass, and scss files work fine until I use #use. I have a _tokens.scss file in /shared/tokens/ folder. Within _tokens.scss I have:
$colorwhite: #ffffff;
In my root folder, my App.scss looks like this:
#use "shared/tokens/tokens";
.App-header {
color: tokens.$colorwhite;
}
But I am getting this error:
./src/App.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./src/App.scss)
SassError: Invalid CSS after " color: tokens": expected expression (e.g. 1px, bold), was ".$colorwhite;"
on line 26 of /Users/xxx/src/App.scss
>> color: tokens.$colorwhite;
Any ideas?
Edit: it works fine with #import. I've also tried #use... as * but no-go.
Update:
Since Node Sass is now deprecated, you can migrate to Dart Sass by replacing node-sass with sass in your package.json and so you will be able to use the #use and #forward rules.
You can use the migration tool to help you with the update.
Original answer:
The #use rule is currently only supported by Dart Sass. You should use #import instead.
You could switch to Dart Sass by taking advantage of package-aliasing. I guess this will not work under yarn.
First you remove the current node-sass pkg, then run:
npm install node-sass#npm:sass.
And you are fit to use the full features from sass with some remarks though.
Check the behavioral diffs here.
The performance measurement indicates that dart-sass is slower than node-sass.
It's all up to you and this turns to be a valid option here, if you really want to use these features provided by Sass.
So I have installed and compiled Sass and it's all perfectly fine working. But I have tried to declare variables, which give me an error message, but I have no idea why.
$black: #333
$pale: #d2e1dd
$pink: #c69
$blue: #036
body
background: $black
The error message is:
Undefined variable: "$black"
Could it be that it has something to do with Ruby since I installed and compiled sass with it?
I faced the same issue with Sass, in my case the error was because I included the variables file after the other file where I used them, you could try doing this, reorder files import, make the variables file at the top.
I have the latest version of Sass (3.2.1 Media Mark) installed on a Mac OS X (10.7.4).
$ sass -v
Sass 3.2.1 (Media Mark)
When I'm trying to create a placeholder (for example)
#page-container {
position: relative;
}
%sample {background: red;}
// The structure
#import 'header';
I'm getting the following error:
"Syntax error: Invalid CSS after "}": expected selector or at-rule,
was "%sample {border..." on line 65 of
/Applications/XAMPP/xamppfiles/htdocs/(project_path)/assets/scss/application.scss"
I thought that uninstalling and reinstalling Sass will solve the problem, but it didn't.
Is it something that I'm doing wrong here?
Have you restarted your terminal? I had the same problem when I upgraded Sass. I had upgraded Sass in a different terminal than the one that I was running my watch from, and I couldn't use the new Sass features from there. I could use them from the terminal that I used to upgrade Sass with.
If you've closed and opened all of your terminals and it still doesn't work, try a reboot.
Well, I've found the problem!
I was using the Scout application that automatically watches the changes inside a folder/project. I've reinstalled it and now it works. It seems like the applications is using its own version of Sass (or something like this), which is a bit wierd!