Menu
I have found a TON of resources on the new asset pipeline, as well as SASS and SCSS. But there is one question that bugs me: what's the proper way to name CSS files? Is it .css.scss, or can't I just go with .scss?
In nearly every example I've seen, they all have the former, so there's got to be a reason for it. I prefer the latter since it makes my file tree just a tad easier on the ol' eyeballs.
Regardless, just because something works doesn't mean it's correct, so I would like to know what is proper and why.
993
What is an SCSS file? SCSS is the second syntax of Sass (Syntactically Awesome Stylesheet) that uses brackets instead of indentations. SCSS was designed in such a way that a valid CSS3 file is also a valid SCSS file. SCSS files are stored with the . scss extension.
Naming Conventions. General rules for naming conventions apply to variables, functions, and mixins. When naming anything in Sass it's recommended to use all lowercase letters with dashes for separation. Sass code syntax is actually based on the CSS guidelines ruleset.
The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @use rule.
While Richard Hulse offered factual and useful information, it did not address the specific question being asked.
I have determined that, even though there doesn't appear to be any technical differences between .scss and .css.scss, it is proper convention to name your SCSS files to include the .css as well (as mentioned in this Tweet).
Update 31 MAY 2013: I see this continues to receive unnecessary downvotes without any substantive comments, but this is ABSOLUTELY the correct answer to my original question.
Update 27 AUG 2016: For anyone stumbling upon this, it seems this discussion is no longer valid for Rails v5+ and Sprockets v3.0+ (see SASS Rails commit d355de9 on GitHub). Generating a new Rails application will create SCSS files with just the .scss extension (no .css.scss).
197
The proper way is to use extensions only if you want to apply some sort of processor to the file. The processess are applied in the order the extensions appear from right to left.
A file labelled .css is just a plain old css file.
A file labelled .css.erb is a file that will be processed as erb and then treated as CSS.
file .css.scss.erb is going to get two types of processing applied. First ERB and then SCSS.
If you are not using ERB inside the files or SCSS then you don't need to add any extra extensions.
Note: If you need to have images referenced in your CSS then you will have to use SCSS or ERB as they have the helper methods which generate the correct URLs when used in the asset pipeline.
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
