Скачать или смотреть Mastering Sass with the @ each Directive: Outputting Variables with $

Discover how to correctly use the `@ each` directive in `Sass` to output CSS with variables that include the `$` character.
---
This video is based on the question https://stackoverflow.com/q/63719007/ asked by the user 'nokiko' ( https://stackoverflow.com/u/103074/ ) and on the answer https://stackoverflow.com/a/63719138/ provided by the user 'dantheman' ( https://stackoverflow.com/u/13929140/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: sass @ each with $ character

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Mastering Sass with the @ each Directive: Outputting Variables with $

Sass is a powerful preprocessor that extends CSS with variables, nesting, and many other features that improve the development workflow. However, there are times when using certain characters, like the $ symbol in variable names, can pose challenges. In this post, we’ll tackle a common problem that many developers face when utilizing the @ each directive in Sass, specifically how to manage variables containing the $ character effectively.

The Problem: Utilizing Variables in an @ each Loop

Imagine you have a set of color variables in your SCSS, and you want to generate CSS classes using those variables while keeping them dynamic. Here’s a simplified version of what you’re trying to achieve:

[[See Video to Reveal this Text or Code Snippet]]

The intended output of this SCSS is:

[[See Video to Reveal this Text or Code Snippet]]

However, the attempt fails because of the $ character which cannot be simply outputted as it is. So what should you do?

The Solution: Using an Associative Array

The best workaround for this problem is to use an associative array (or map) in Sass. This allows you to associate different outputs (like your color variables) with their corresponding names neatly. Here’s how you can do it:

Defining Your Colors

First, define your colors in a map format. This is much cleaner and will allow you to easily reference the variable values without running into issues related to the $ sign.

[[See Video to Reveal this Text or Code Snippet]]

Iterating with @ each

Now, modify your existing .btn-outline style to utilize the associative array like this:

[[See Video to Reveal this Text or Code Snippet]]

Outputting the Desired CSS

With this setup, when you compile your SCSS, you will get the desired output:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion: Embrace Sass’s Flexibility

Using Sass maps helps you not only resolve the $ character issue but also enhances the maintainability and scalability of your stylesheets. You now have a clean, effective way to handle related variable outputs and can easily expand your color palette or class naming conventions in the future.

If you find yourself needing dynamic color management, remember that Sass’s map functionality is your friend! Happy coding!