DEV Community

Cover image for How '@use' like '@import' (Sass new syntax) 🤔
Thiago Silva Lopes
Thiago Silva Lopes

Posted on • Edited on

5 2

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. ✌🏼

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay