Скачать или смотреть Accessing Variable Names from Values in SASS/SCSS: A Guide to Dynamic CSS Rules

Learn how to retrieve variable names based on their values in SASS/SCSS loops to create dynamic CSS with ease.
---
This video is based on the question https://stackoverflow.com/q/9279738/ asked by the user 'MatterGoal' ( https://stackoverflow.com/u/499990/ ) and on the answer https://stackoverflow.com/a/62266712/ provided by the user 'Tofandel' ( https://stackoverflow.com/u/2977175/ ) 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: Get variable name from variable value in SASS/SCSS

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 3.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.
---
Accessing Variable Names from Values in SASS/SCSS: A Guide to Dynamic CSS Rules

Dynamic styling in SASS/SCSS can sometimes feel like a puzzle. If you’ve ever found yourself scratching your head over how to access variable names from their values specifically within an @ each loop, then you're not alone. In this guide, we will break down the solution to this common problem, guiding you step by step through the process of dynamic styling by leveraging variable names effectively.

The Problem

Imagine you have multiple CSS rules determined by a set of boolean values: true or false. You want to only print certain CSS rules based on these boolean settings, allowing you to manage styles efficiently. This is the case when you want to utilize a simple loop that should check the status of your variables dynamically.

Let’s say you have the following variables:

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

You want to create a mixin that goes through these variables and checks if any are set to true. Your goal is to achieve something like this CSS output:

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

However, the challenge here lies in dynamically checking the value of a variable by its name: you want to turn the prefix from your loop into a valid variable reference. Using # {$prefix} directly in this context doesn’t work as expected, leading to errors.

The Solution

To resolve this challenge, the most effective approach is to utilize maps in SASS/SCSS. By passing a map to the @ each loop, you can organize your variables more effectively, ultimately leading to cleaner and functional styling.

Steps to Implement the Solution

Create a Map:
First, define a map that will couple your variable names with their respective values.

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

Define the Mixin:
Next, create a mixin that will use this map to loop through each key-value pair.

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

Include the Mixin:
Finally, apply the mixin inside a CSS rule set, passing the desired value.

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

Complete Example

Bringing it all together, here’s how your code looks in total:

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

Conclusion

By using a map in SASS/SCSS and looping through its contents, you can dynamically access variable names and generate CSS rules based on their boolean values. This method not only enhances readability but also adds flexibility to your styling process. Now, you have the tools to manage your CSS with greater ease and creativity!

Feel free to implement this pattern in your own projects, and say goodbye to the limitations of static variable checks!