Using subfolders for Sass partials in Compass project directory structure

Question

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!

I Found the solution [here][1]!! It was very simple. [1]: http://stackoverflow.com/a/12945982/1135284 — Joseph Ramos, Feb 19 '14 at 17:06

score 0 · Answer 1 · answered May 08 '12 at 08:16

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.

score 0 · Answer 2 · answered Aug 05 '15 at 06:15

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.

score 0 · Answer 3 · answered Feb 06 '11 at 12:53

0

If you placed partials, for example, in src/partials directory — just use @import "partials/name" in sass/scss files to import them.

answered Feb 06 '11 at 12:53

Victor Deryagin

11,895
1
29
38

@musoNic80: strange, because it works good for me. Maybe you did some mistake in spelling names or something? – Victor Deryagin Feb 06 '11 at 15:34
No, I checked and double checked! – musoNic80 Feb 07 '11 at 08:30

score 0 · Answer 4 · answered Feb 17 '11 at 14:32

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.

score 0 · Accepted Answer · answered Mar 03 '11 at 23:56

0

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!

answered Mar 03 '11 at 23:56

musoNic80

3,678
9
40
48

What do you do to "set compass to watch the project"? I'm trying to figure out a good way to structure my app/assets/stylesheets directory as well. Do you know of a good sample app anywhere? I'm on Rails 3.2. – robertwbradford Jan 30 '12 at 20:52
It's all in the compass docs. On the command line type compass watch /path/to/project – musoNic80 Jan 31 '12 at 08:53

Using subfolders for Sass partials in Compass project directory structure

5 Answers5