DEV Community

Cover image for How '@use' like '@import' (Sass new syntax) πŸ€”
Thiago Silva Lopes
Thiago Silva Lopes

Posted on • Updated on

How '@use' like '@import' (Sass new syntax) πŸ€”

So, Sass has a new set of rules that come to replace the old '@import' syntax. But, the new '@use' and '@forward' rules isn't just replacing and working exactly has their old ones.

⚠ The problem

If you are trying to import a 'variables.scss' to other Sass file and just replace your '@import' with a '@use', you will find that your variables still aren't reachable.
Code without *

Code error

❓ Why this happens?

The new rules are here to fix a lot of bugs from conflict between files that may happen sometimes with the variables import.

The new syntax makes that you only import the variables of a file using some modular stylesheet way. And this is:

  • Adding the name of the file you are importing in front of each variable you use: Styling with name of file

For me and a lot of people who been using Sass, one of the biggest advantages of this CSS preprocessor, is that syntax is almost the same as plain CSS, but with super powers.

The old way of styling your files was that (beside the $ instead @), we could use the same way of import vars between files on CSS. This new way makes that one of the biggest advantages of Sass syntax, as deprecated.

βœ” How to fix this?

Instead of adding the name of your Sass variables file in front of every single vars in your file, you just need to add πŸ‘‰πŸ½ 'as *' in the end of your import:

@use "../SassFolder/SassFile" as *;
Styling with as *

And yeah, just with 3 characters, you can use the new '@use' syntax without any more pain.

πŸ‘¨πŸ»β€πŸ’»πŸ“š Special thanks & credits to:

Pixel Rocket and his awesome Sass Crash Course, that helped a lot of solving this headache;

Other devs on Stack Overflow who faced the same problem &/or helped to find solutions. ✌🏼

Top comments (0)