CODEWITHSUNDEEP
ruby-on-railsasset-pipelinesass
Matthew Clark
Matthew Clark

Reputation: 1965

SCSS file names

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.

Upvotes: 5

Views: 1476

Answers (2)

Matthew Clark
Matthew Clark

Reputation: 1965

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).

Upvotes: 6

Richard Hulse
Richard Hulse

Reputation: 10493

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.

Upvotes: 4

Related Questions