Nesting helps you keep track of the structure of the HTML and its styling. HTML is nested itself, so when looking for a tag to change, it’s easy to follow the corresponding tree in the stylesheet.

Partial Sass Files

Importing is a great way to organize stylesheets. Rather than having one massive Sass file, create a number of smaller Sass files. All but one of these should be a “partial” file. (In Moovweb projects, usually the only non-partial stylesheet is main.scss.)

Partial files do not get converted into full stylesheets by Sass. Therefore, if you want a partial file to be turned into CSS, you must make sure to @import it into a non-partial stylesheet.

Moovweb uses partial stylesheets to contain all the styles necessary for unique page types. For example, some styling that is only necessary on a products page is in a separate _products.scss file. The underscore means that the file is not converted into a CSS file when Sass runs. But, to make sure the styling is applied to the page, add @import "products"; to the main.css file.

Below, there is an example of how partial files work. The _products.scss file is not converted into a separate CSS file, due to its underscore. The myaccount.scss file has no underscore, so it’s converted into a separate CSS file.