SCSS/SASS no mapping/compiling into CSS

Question

I'm quite a fresh Sass user and I'm trying to get off the ground using it. I like the SMACSS hierarchy and have tried to incorporate that into my project as you see in the image here, using Brackets:

It compiles via Ruby installed on my pc. However, no matter what I do, the main.scss file isn't mapped and doesn't translate into the main.css file. The only thing in the main.css file is

/*# sourceMappingURL=main.css.map*/

I've searched the web and haven't found an answer. Any Sass users out there with some advice?

What's interesting is when I made a "robotodraft.scss" file directly in the vendor directory folder, as shown in this link FontFaceKit RobotoDraft, it works! A css and css.map file are automatically generated with the content!

However when I try the same with _underscorefiles in multiple folders linking to a main css in the styles folder as you see in the above image, I get nothing.

My vendor folder looks like this

UPDATE 6/25/16

I made a font.scss file to point to the folder and files containing my fonts I want to use and it compiled! I still can't figure out why my main.scss can't compile. There are no syntax errors in the file. See font file below

Answer 1

I found my answer from this method, which is basically like placing an ambassador file for each subfolder you use in your Sass-based project. I used an index.scss file in each folder that referenced to all files in each folder, then I simply imported those index files in my main.scss using the proper @import syntax. I'm not exactly sure what was causing it to not compile before, but safe to say it's best to keep it simple and clean with Sass architecture.

Answer 2

You're using an underscore (_) as a file prefix, which is reserved for partial sass (like require in Ruby, or include in C)...

Make sure you either drop the underscore or use an import directive correctly (maybe it was include directive, I can't remember of the top of my head).

Answer 3

Usually, when SASS doesn't compile, it means that there is a syntax error somewhere. I'm unfamiliar with what editor you are using or how your SASS is precompiling, but check for errors in your console or in your individual files.

There is a link to "styles/typography.css" in line 17 of index.html, which I don't see in your folder structure anywhere. Again, depending on how you're compiling, this may or may not be the problem.

If you are calling "typography" via @import somewhere in your partials, that would definitely halt compilation and prevent a compilation of main.css