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 *;
Related
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.
How do I build my .scss using webpack? I can find less loaders and css loaders but not scss. Is this the same as Sass? I keep getting referenced to Sass but the syntax is different
This is more a question of SASS syntax vs SCSS syntax.
Directly from the first result on google for such a search:
The most commonly used syntax is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3's syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss. The second, older syntax is known as the indented syntax (or just “.sass”).
As for its compatibility with the sass-loader in webpack - ultimately, the sass loader calls the node-sass library, which itself is built on libsass.
The tools support both syntax forms, so you can expect to use the sass-loader with either without any problem.
sass-loader usage with older .sass syntax
If you are using .sass you simply need to pass an option on the query-string when using the sass-loader:
loaders: [
{
test: /\.sass$/,
// Passing indentedSyntax query param to node-sass
loaders: ["style", "css", "sass?indentedSyntax"]
}
]
sass-loader usage with more common .scss syntax
If you are using .scss, and provided you having configured the loader correctly, everything should just work.
Here is a link to the sass-loader for your reference: https://github.com/jtangelder/sass-loader
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";
I have a Grunt task for compiling scss files using Compass and build fails every other time. When I change a file that uses a Compass mixin, e.g. #import box-sizing(border-box), it fails and says that plugin is not included (it actually is included in a file "all.scss" using #import "compass/css3/box-sizing", and then it includes other scss files.
Second time (after you see the error) you try to compile it, it works just fine. I guess the reason is that if other files (specifically my "all.scss" file) has not been changed, it skips it during compilation, so include is not found.
Also, if I use require 'box-sizing' or require "compass/css3/box-sizing" in config.rb, it also fails saying that it can't find this plugin.
Any idea what's the cause?
box-sizing is a mixin, so you want to #include it, not #import:
#include box-sizing(border-box);
As you were importing it, the compiler treats it as a Compass extension, which is missing in the config.rb. But it's not an extension in the first place, it's part of Compass in the first place!
So changing #import to #include will solve your issue.
See http://sass-lang.com/#mixins for syntax.
I've been using sass for quite some time however I was wondering if there is a way to force it to use files with a .css extension as input instead of the usual .scss.
The thing is I would like to use sass to perform minification on a rather old project which was written in pure CSS however stuff like this won't work until I change the extension of the file to .scss.
sass input.css output.css --style compressed
So basically what I am asking is if there is anything I could use to bypass the requirement sass is imposing on me to exclusively use files with .scss extension as input? Something like a command line option perhaps which I missed in the official documentation?
After some additional documentation book-worming and poking with the sass command line tool itself it seems I found the solution. All I needed to do is add the --scss argument to let sass know that no matter which file or extension I use it should interpret it as a SASS file. Since my CSS files are of course SASS compliant minification was performed without a trace of complaining.
sass --scss main.css main.min.css --style compressed
One little (in my opinion badly documented) command line argument and I waste the better part of the day to find it.