Another day another problem :)
Let me show what I noticed with my css on the project.
Here is the structure of the project, which is common for most rails project, I think
application.sass I had
Later I added
file1.sass where I wanted to use those rules defined in
values.sass, but guess what, I couldn’t use those values, because I got an error
Easy fix - let’s add
@import "values.sass" to the
Yay! It rendered.
Next, I had to create another file (because we are separating rules for each screen).
And again error about undefined variable, fix - add
And the process continues…
If you open you compiled file you will see something like:
Do we need this? nooo, it’s hard to call a solution, when you have those copied rules multiple times. In the end, our poor users have to download all those long and big files.
So I started to read documentation :) RTFM, right? X))))))
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.
Which basically means we need to @import our files instead of *=require. So easy and right fix will be to rewrite application.sass to:
After that you will not have any issues with duplications or scope problems.
Thanks for reading!