I wrote a blog about using @import with your SASS projects to use variables and information from another file within your projects. There is another way to achieve this and that is with using @use.
"The @use rule loads mixins, functions, and variables from other Sass stylesheets, and combines CSS from multiple stylesheets together. Stylesheets loaded by @use are called "modules". Sass also provides built-in modules full of useful functions."(Sass, Online Docs. 2021)
I am using this image straight from the Sass website. It clearly shows how to incorporate use into your files.
Think of it this way, When speaking to your computer, you have organized your style sheets and all that wonderful glory, in your main style sheet that you want sass to run, say "hey I want you to USE my code style sheet found in the foundation folder (i.e. "foundation/_folder.sass") and also the lists style found within the same folder ("foundation/_lists.sass"). Just as a review, the underbar right before the file name tells the computer to ignore that file and not run it with the projects unless stated otherwise.
Now you may be wondering what is the difference between using use and import. Well fundamentally they both do the same thing, but the main difference between the two is that import makes every variable globally accessible in the target file.
"Import enables an endless chain of imported files where it's difficult to trace where your variables and mixins are coming from. It also allows for overlap and makes it difficult to trace back why your perfect css breaks. This is a problem especially with complex file structures and projects with multiple contributors and global libraries, which is why @import is no longer recommended by Sass."(liquidlight.co.uk, Minna Ylitalo 2020. online docs. 2021)
Top comments (0)