This is a question to know more about the Sass results when convert to css.

all .scss files convert and resume in four CSS files:

mytheme.styles.css and mytheme.styles.css have same content.

mytheme.normalize.css looks similar and I believe is related with Normalize.css

and mytheme.hacks.css only have some info about @media all and (max-width: 800px) and html body.toolbar, html body.admin-menu.

I want to one the function of each CSS files.


pkiff’s picture

Here is a quick explanation of these files as I understand them.

This is the main CSS file for your theme. Most SASS you write gets compiled into this one long CSS file.
This is a "no-query" fallback version of your styles.css that targets devices that cannot read @media queries. It is linked to the breakpoint extension, and it is automatically generated based on your breakpoint settings. Breakpoint also allows you to write additional SASS code that specifically targets fallback or no-query cases. See:

This is just a copy of whatever normalize.css file you are using, and you probably shouldn't ever edit this directly.

This is a special CSS file that is read AFTER all the rest of your theme's CSS is read. It is there so you can add hot fixes or make changes directly in CSS without having to spin up your Omega dev environment and re-compile your CSS again. If you have clean, well-written, complete SASS files and you don't need any weird CSS hacks, then this file should be empty.

For a good overview of the Omega 4.x SASS and CSS file structure, including explanations of the files listed above, you might check out the following blog post by Fred Parkes:
Get aquainted with Omega's SASS file structure

koffer’s picture

Thanks a lot of the answer! I think could be good to add this information to a documentation page so I create it.