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";
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 *;
Im using Codekit to compile my sass, and Im splitting parts of my website into individual sass files so when it comes to editing I can easily find the file I'm looking for, But I've noticed that when I edit an import I have to go back to the main.sass style sheet and re-save so that it recompiles my changes, my question is, is their a way to automatically compile my main.sass file upon edit of an import ?
Main.sass
#import 'scss_files/_styles.sass'
#import 'scss_files/_service.sass'
#import 'scss_files/_outsource.sass'
#import 'scss_files/_branding.sass'
#import 'scss_files/_wordsearch.sass'
Maybe there is an error. Try to remove the file extensions of your imports (.sass) because in sass there is no need to include the file extension if you are importing a file
I'm trying to compile many Sass files using this Grunt plugin, but I'm having a problem when a file have a rule like this:
.my-icon {
content: "\\";
}
The problem here is the use of "\".
In my project the Sass file that have this code import other files using #import and it is imported by other files too.
I don't know why but when the Sass has this type of rule the #import does not work.
In my Compass the top file has lines which include necessary plugins:
#import "compass";
#import "rgbapng";
#import "compass/css3";
#import "config"; // file that has my variables
But during compilation of a file that has #include border-radius($box-radius-small); errors out saying Undefined mixin 'border-radius' and Undefined variable: "$box-radius-small". - both of which should be included already!
Can anyone please help with this issue?
PS my packages are:
Compass 0.12.2 (Alnilam)
Sass 3.2.7 (Media Mark)
Just place the following import at the top of your scss file
#import "compass/css3";
Features of css3 :: http://compass-style.org/examples/compass/css3/
There are many other imports available out there...and you can create your own if you find yourself re-using blocks of css often enough to warrant the extra effort.
Try to #import "compass" and your "config" variable sheet in every stylesheet that uses the mixins or variables.
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.