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.
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
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";
Iam trying SassyStudio für Visual Studio to compile the SASS in our project - but there area some issues.
The project is structured like this:
Solution
- Project 1
-- Areas
--- Area 1
---- Styles
----- style.scss
------ style.css
--- Area 2
---- Styles
----- style.scss
------ style.css
-- Styles
--- globalstyle.scss
---- glogalstyle.css
As you can see the scss files are scattered all around the project. The css Files should be compiled beside the scss files. Since there are compass references within the scss files there are dependencies to compass.
Mindscape Web Workbench is not designed to work like this.
I installed Ruby + gem sass + gem compass and
sass --watch C:/compasstest:C:/compasstest --compass
works well. But I dont like to start a batch everytime I start developing.
So I found SassyStudio an it pretty looks like what I need. But there are some issues with the compass references. In the options I entered "C:\Program Files (x86)\Ruby193\bin" to Ruby Install Path and "C:\compass" to the Include Paths property. The Compass Folder contains for example the "compass/css3" structure from github.
12:00:52.447 : Failed to compile css.
[SassCompileException]c:\compass/compass/css3/shared:1: error: file to import not found or unreadable: "compass/support"
at NSass.SassCompiler.CompileFile(String inputPath, OutputStyle outputStyle, Boolean sourceComments, IEnumerable`1 additionalIncludePaths)
at SassyStudio.Integration.LibSass.NSassDocumentCompiler.Compile(FileInfo source, FileInfo output)
at SassyStudio.Editor.GenerateCssOnSave.GenerateCss(DateTime time, String path)
12:00:52.447 : Compile complete.
What exactly is Ruby Install Path for?
Do I need the config.rb even if I dont want so specifiy specifiy sass and css folder?
How can I tell SassyStudio to find the file compass/support (It already found compass/shared as we can see)?
OK, so the sass --compass is new to me, so I don't know if I can comment on that.
Here is what you want to do.
First, change your ruby path to this C:\Program Files (x86)\Ruby193 as you don't need the bin directory in there (and not sure if it would cause issue or not).
Next, for me to detect that you are using compass (vs sass gem), I look for the config.rb file, and I believe that compass requires this to work as well, but not exactly sure on that. For me though, I definitely need it.
Now, what happens when you save a file is that I go looking for that config.rb from the current directory upward, so I believe that you can achieve what you are wanting to do through the use of multiple compass.rb files. So, that means if you put one in Area 1, one in Area 2, and one in Styles, I think it will work (but I've never tried).
I'm a bit unfamiliar with the syntax of compass.rb but I'm sure you will be able to figure out something that works there. That file may need to go into the Styles folder instead of root folders, I don't remember for sure (I think styles is perhaps configured in config.rb).
Let me know if you need anymore help.
I'm using middleman with bower to manage bootstrap/less and other libraries and most everything i need works beautifully using:
after_configuration do
sprockets.append_path File.join "#{root}", "components"
....
This works fine when I just want to require something from all.css
*= require bootstrap
Works great, but when I try to import libraries in less it can't seem to find them anywhere...
// bootstrap_and_overrides.less
// physical location is /components/bootstrap/less
#import "bootstrap/less/bootstrap";
#import "bootstrap";
Nothing works, cannot find assets error... I'm not sure what I'm doing wrong.
https://github.com/razorfly/middleman-bootstrap-template
#import is the Less processor and not Sprockets.
What I did was reference the Bower components directory in the less file.
#import "../../components/bootstrap/less/bootstrap"
The Less compiler has no problems walking the directory tree, so give that a try.
You should have sprockets activated in your config file.
activate :sprockets
It's kind of obvious but the template does not activate sprockets by default.
I've got a compass project up and running with scss files in a src directory which are being compiled into a sttylesheets directory as css. This is all fine and I'm able to use the sass #import command no problem.
However, I'd like to bring a bit of organisation to my sass partials and place them into relevant folders within the src directory. However, when I try to do this the #import command fails.
Is there a way of doing this?
UPDATE: I found in the compass docs that I can add add_import_path to my configuration file, but I can't get this to work either. I've tried a full path to the directory and a path relative to the project but nothing is happening.
Someone please help, it can't be this hard!
If you placed partials, for example, in src/partials directory — just use #import "partials/name" in sass/scss files to import them.
I found that in a webby static project where I was using compass / sass I had to explcitly set the base sass path to be used in order for it to pick up sass imports (everything worked except for imports).
So I ended up doing something like this in the compass config block:
config.sass_dir = File.join('content', 'css')
I imagine this is because I'm using something other than the default sass paths, so when I #import it was looking within it's default path instead of the actual path.
Hope that helps.
So it turned out I was going about things the wrong way. I was trying to be efficient and organise my folder structure before doing anything with compass. I realised that I needed to set compass to watch the project first and then create a folder structure. That way the folder structure gets replicated in my stylesheets or CSS folder instead of just being in the source folder. Now everything is working as it should!
I had the same problem. Actually I was migrated from rails + sprockets project to standalone one.
I don't know why, but Compass doesn't work with sprockets-style filenames, like screen.css.scss. I renamed all my files just to screen.scss and all partials worked as expected.
I had a similar problem. It was very stupid of me - but then again, most problems in programming are. My problem was that, although I had everything setup correctly for standalone, according to:
https://github.com/twbs/bootstrap-sass
I was using a subfolder structure like this:
project
-- stylesheets
-- bootstrap
-- sass
---- main.scss
------- subfolder1
----------- partial.scss
------- subfolder2
----------- partial2.scss
And in my main.scss, I did use #import correctly, like:
#import "subfolder1/partial.scss"
The problem was this:
Compass only sees partials correctly if the filenames start with underscores!
Once I renamed the files to _partial1.scss and _partial2.scss, everything worked without a problem.