[SCSS] Organize SCSS to multiple Files with partials

Tired of dealing with monolithic CSS files? is requests for multiple CSS files hurting your performance? In this lesson we learn how to separate our styles with SCSS partials, and how SCSS imports compile to one file so there ' s Only one request.

Things to know:

• If importing partial file, won ' t generate a new CSS file
• If importing normal scss file, it'll generate a new CSS file

So if we should use partial import or not, you can think that whether the this file should is used when app first Loadin G? If it is Yes, then with partial import, if not and then normal import. The reason behind is because browser would loading main CSS (the Main.scss file that imports other scss files) fil efirst. After the Main.css file loaded, then browser'll start loading other CSS file.

As can see Other.css which is import as normal import mode. "Content downloaded" happens after main.css file is downloaded.

• Only partial file ' s variable can be shared accross the rest of the partial file. But it also require your import that partial file which have variables defines into Main.scss file before the rest partial F Iles.

/** about using variable there is tow cases when using variable 1. None partial file (provider) + None partial file    Variable only available for its own file scope. If you want to use one variable inside file A from file B, you have to import the file a into file B. 2. Partial file (provider) + None partial file If you have a variable defined in partial file, and you want to use it Inside none of the partial file, you also need to import the partial file into none partial file.    3. Partial file (provider) + partial file If you had an variable defined in partial file A, and you want to use it Inside another partial file B, you has to import the file A into the Main.scss file before you import the file B into main.scss. Then you can use variable inside file A inside file B.*/@import "Color"; @import "partial"; @import "other";. Color{Color:$primary-color;//From _color}

_color.scss

{  color: $primary-color;}

_partial.scss

{  border-left: 5px solid $primary-color;}

Other.scss

{    background-color: $primary-color;}

[SCSS] Organize SCSS to multiple Files with partials