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.
Related
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 just installed susy via npm but don't know how to include it in the main scss file. How can I import susy?
I've tried:
#import "icons";
#import "nav";
#import "page_home";
#import "../../../susy";
where susy is in /node_modules and main.scss is in /app/style/sass
Your path goes up to the root directory, but doesn't then go down into the node_modules/susy/ directory.
Try updating #import to something like:
#import "../../../node_modules/susy/sass/_susy.scss
When you import a file you don't need to include the file extension _ or .scss. Sass is smart and will figure it out for you.
#import "../../../node_modules/susy/sass/susy";
I have a scss file in which I do not want sass to process an #import statement as it will be processed by this postcss module https://github.com/postcss/postcss-import
How can I do this using gulp-sass?
You simply can't. Sass will compile #import “some.css” to #import url(....css);
Why don't you use Postcss (and neccessary plugins) to compile your .scss file and that way postcss-import can deal with the #import.
I'm trying to include Susy in my Nanoc project.
I followed the GitHub of ddfreyne. I installed Compass first and Susy next. Then, in my Gemfile I added the line: gem "susy".
In my stylesheet, I added #import "susy" Unfortunately, I have an error during the compilation which is Sass::SyntaxError: File to import not found or unreadable: suzy. I don't understand this error...
I'm using SASS to make my stylesheets.
I hope you'll be able to help me! Cheers.
The mistake was quite simple. I had to replace #import "suzy by #import "susy" in my stylesheet.
I have a burbon running on code kit. It is not problem, I cant get neat running?
when i put
#import "neat";
I get this error
Syntax error: File to import not found or unreadable: neat.
Load paths:
/
/Applications/CodeKit.app/Contents/Resources/engines/bourbon/bourbon/app/assets/stylesheets
on line 13 of /Applications/MAMP/htdocs/dev.wordpress/wp-content/themes/blankslate/style.scss
Use --trace for backtrace.
Since CodeKit version 1.8, Neat is built in. You don't need to install anything, just write this in your SASS/SCSS file:
#import "bourbon", "neat";
Make sure your 'Neat' folder is inside your stylesheets folder and use #import "neat/neat";
directory example:
[sitename] > [assets] > [css] > styles.css, [sass] > _main.sass, styles.sass, [neat]
Neat is a framework on top of Bourbon, so it does not automaticaly come with Bourbon.
Install Neat as following.
In Terminal:
gem install neat
Then cd to your Sass directory and run:
neat install
In your Sass file:
#import "neat/neat";
You also need to do:
#import "bourbon/bourbon";
before:
#import "neat/neat";
so your final scss file should start with(in the same order):
#import "bourbon/bourbon";
#import "neat/neat";