16.13 “@import”
When the projects become more extensive, it isn’t advisable to write everything in an SCSS file. As with CSS, in Sass, you can split SCSS files into meaningful sections such as reset, setup, layout, navigation, and so on; import them via @import; and compile all the spun-off sections into SCSS files to create a CSS file. As a web designer, you can still keep track of everything thanks to the individual SCSS files. For example, I personally use a style.scss file into which I import all other SCSS files. Here’s an example of using @import:
Listing 16.6 /examples/chapter016/16_13/style/style.scss
When importing with @import, the file name between "" is sufficient. In this example, the SCSS files _reset.scss, _layout.scss and _basic.scss are compiled, and the entire content is written to the CSS file, style.css. The underscore at the start of the individual SCSS file names is important so that they don’t get compiled directly. If you didn’t use an underscore, you would have generated the reset.css, layout.css, and basic.css files in addition to the style.css CSS file. However, this is superfluous here and can be bypassed quite elegantly with the underscore before the file name. Of course, you can also specify the full file name when importing (even if it isn’t necessary):
// File: style.scss -> style.css
@import "_reset.scss";
@import "_layout.scss";
@import "_basic.scss";
The order in which you write the SCSS documents when importing them is also of enormous importance, especially if you use variables that you also use in other documents. For a variable to be assigned correctly, it must also be known. For this purpose, it can be useful, for example, to write the variables in an extra SCSS file and import that file right at the beginning:
@import "reset";
@import "setup"; // All variables go here
@import "layout";
@import "basic";