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.
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 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.
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.
I just started with materialize but now I'm faced with a problem.
When I want to use: #media #{$small-and-up} { media query in my own scss file I get the following error: Error: Undefined variable: "$medium-and-up". While I'm importing the materialize.css file which is compiled from /sass/materialized.scss.
So my question is how can I use the variables / media querys in my own scss file?
I compile the scss by the file watcher plug-in in PHPStorm or by sass compiler installed in command prompt windows.
I hope someone can help me.
SASS variables don't exist in compiled CSS files. If you want to use variables defined in materialized.scss in your own SCSS stylesheet, you need to insert #import "sass/materialized.scss" in your stylesheet.
Incidentally, if you do this, you probably won't need to compile materialized.scss any more. Just compile your SCSS stylesheet, which, because of the #import statement, will pull in materialized.scss.
UPDATE:
After reviewing code at https://github.com/SuperDJ/dsuper/blob/master/private/admin/css/sass/opening.scss, it seems the problem is with this line:
#import url(/private/admin/css/material/sass/materialize.scss);
This is not valid syntax in SCSS. It should be:
#import "../material/sass/materialize";
For the last 2 days I get this error while compiling my sass files.
Compass was unable to compile one or more files in the project:
error style.scss (Line 58 of _media.scss: Undefined mixin 'set-legacy-ie-support'.)
create style.css
I do have the following libraries installed
breakpoint-1.3 compass-0.12.2 rubygems-update-1.8.24 sassy-buttons-0.1.4
chunky_png-1.2.6 fssm-0.2.9 sass-3.2.1 susy-1.0.5
Can anybody tell me where this mixin supposed to be? If I do a recursive search in /Library/Ruby there ain't no mixin with that name. I can't figure it out. Please someone?
Regards Norman