I just started with compass with scout for the GUI.
I'm trying to follow along with a demo and am a bit confused about #import. When I do
#import "compass" everything compiles fine. However when I try to import #import "scss/normalize" which is in compass/scss/_normalize.scss i get
Change detected at 14:59:07 to: screen.scss
error screen.scss (Line 2: Invalid CSS after "#import "compass"": expected selector or at-rule, was "#import "scss/n...")
overwrite screen.css
What exactly is #import "compass" doing? what file is that importing? Or is a folder from where I installed scout in program files?
figured it out. you need a ; after each import statement. duh.
Related
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
According to this answer, I should be able to #import a .css file directly (as opposed to an import link).
However, I have the following situation:
If the file is named bootstrap.css
#import "../external_components/bootstrap/css/bootstrap";
Does not work, because sass can't find the file.
#import "../external_components/bootstrap/css/bootstrap.css";
Does work, but now I have the import link and an extra .css file hanging around.
Now, the answer I linked only mentions libsass and node but I would really like to be able to do something like that with ruby sass. Is there a way? Am I not understanding something basic?
My sass -v is 3.4 and apparently up-to-date.
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'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";