Proper way of using sass with Rails

0
votes

At first, I have written all css styles in one file but things get complicated so I have divided my sass files to folders. I found an article from internet and I followed it. It says "if we put _ in front of sass file, it will not indexed by compiler"

  • Created 3 folders
  • Created files _test_name.scss like that
  • Created _index.scss file for every folder and import all other scss files in that folder
  • Created main.scss file and import all index.scss files in it.

Everything is working fine but if I use color variable in somewhere in other folder it didn't wok. It gave me undefined variable error message. After that I imported colors scss file then it worked. But that's strange right? It should work without importing colors scss file. Now the thing is if I see my styles in developer tools, the same style repeating three times! Please check image

enter image description here

Am I did something wrong here?

1
cssruby-on-railsrubysass

1 Answers

0
votes

Using Sprockets directives does not work well with SASS.

Sprockets provides some directives that are placed inside of comments called require, require_tree, and require_self. DO NOT USE THEM IN YOUR SASS/SCSS FILES. They are very primitive and do not work well with Sass files. Instead, use Sass's native @import directive which sass-rails has customized to integrate with the conventions of your Rails projects.

So the first thing you should do is get rid of any sprockets directives in your application.scss and leave the compilation to SASS*. This is the most likely explanation to why you are seeing the same styles applied three times as require_tree . slurps up any partials.

So instead you should do:

@import "test_name"

sass-rails provides globbing features which can be used to require all partials in a directory as well.

@import "mixins/*" 
@import "mixins/**/*"

However its usually better to manually import your dependencies as the loading order is hard to determine.