Generating numerous variables simultaneously is a feature of SASS

Is it possible to utilize a SASS map in order to generate individual variables for each key-value pair?

For instance, I aim to achieve the following:

$heading: (   
    1: 5rem,   
    2: 4.5rem,   
    3: 4rem,  
    4: 3.5rem,   
    5: 3rem,   
    6: 2.5rem );

and transform it into this:

$heading-1: 5rem; 
$heading-2: 4.5rem; 
$heading-3: 4rem; 
$heading-4: 3.5rem; 
$heading-5: 3rem; 
$heading-6: 2.5rem;

While I was able to use the map for generating class names for each variation, my goal is to create the variables themselves instead of the class names.

htmlcssreactjssassless

Answer №1

Utilizing maps can provide a structured method for visualizing and organizing data/values. Access values within a map by utilizing map-get:

/* Map */
$size: (   
    small: 12px,   
    medium: 16px,   
    large: 20px
);

/* Extract specific value from the map using map-get */
.text-medium {
    font-size: map-get($size, medium);
}

/* Output */
.text-medium {
  font-size: 16px;
}

You can create a reusable function for easy access as well:

/* Map */
$size: (   
    small: 12px,   
    medium: 16px,   
    large: 20px
);

/* Function to reference size values easily */
@function textSize($size-key) {
    @return map-get($size, $size-key);
}

.text-large{
    font-size: textSize(large);
}

/* Output */
.text-large {
  font-size: 20px;
}

If you require individual variables, creating them separately would be more suitable.

Additionally, consider utilizing an @each loop to generate CSS custom properties based on map entries, which could be beneficial in certain scenarios:

/* Map */
$size: (   
    small: 12px,   
    medium: 16px,   
    large: 20px
);

/* Using @each loop to generate CSS custom properties for each entry in the map */
:root {
    @each $key, $value in $size {
       --font-#{$key}: #{$value};
    }
}

/* Output */
:root {
  --font-small: 12px;
  --font-medium: 16px;
  --font-large: 20px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring JSON data with Angular

I am struggling with searching JSON data using Angular. After following various tutorials online, I am now facing an issue where the JavaScript debugger in Chrome shows that the script is running but nothing is being displayed on the page. As a beginner, ...

javascripthtmlangularjsjson

"An error has occurred in the file system, make sure to handle it when

I am encountering an issue with submitting a form using jQuery's ajaxSubmit() function. The problem arises when the file selected in the form is renamed, deleted, or made inaccessible before submission, leading to potential discrepancies in whether th ...

jqueryhtmljspfile-uploadstruts2

react elements are consistently positioned at the bottom of the webpage

I am currently in the process of developing an airline reservation system using the MERN stack. I have successfully implemented the navbar, however, whenever I try to add a new div or element, it appears outside of the page and requires additional styling ...

htmlcssreactjs

W3C validation issue: "Failure to immediately follow a start-tag with a null end-tag" and similar errors

Encountering validation errors with the following code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <hea ...

cssxhtmlw3c-validation

Upcoming JWT authentication module

I've been working on a simple application using next.js and integrating JWT for user authentication. My goal is to have a single navbar and layout that can dynamically adjust based on the authentication status. Below is my code: import React from "r ...

javascriptreactjsnext.jsjwt

retrieve the timestamp when a user initiates a keystroke

Seeking assistance from the community as I have been struggling with a problem for days now. Despite searching on Google and Stack Overflow, I haven't found a solution that works for me. My web application features an analog clock, and I need to capt ...

javascripthtmlclock

What's the best approach when it comes to declaring CSS in an HTML document: should you

I have a quick question about HTML and CSS. Recently, I started using Twitter's Bootstrap framework and added this code snippet to the head of my index.html file: <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/style.css" re ...

htmlcss

Troubleshooting CSS loading issue on iPhone 5 Safari with Responsive Design

I am trying to figure out why my website (Link) is not displaying correctly with responsive design on iPhone5 Safari Browser, even though it works fine on desktop browsers like IE, Chrome, and Safari. It also displays correctly on HTC and Samsung Galaxy de ...

htmlcssresponsive-designmobile-safariiphone-5

React seems to have trouble working with Firebase Firestore queries

Struggling with this particular issue for the past 6 hours, I just can't seem to figure it out. My objective is to query orders based on their status using Firestore. However, whenever I try adding a `.where` clause in the function, it simply doesn&ap ...

reactjsfirebasegoogle-cloud-firestoreaxios

Having trouble making `overflow: hidden` work correctly when using padding on an element with `height:

Looking for some coding help here. My aim is to create a customized select menu with a sleek animation effect. I initially decided to set the default height to 0 and use overflow: hidden, then switch it to auto when .active class is applied. But, I'm ...

javascripthtmlcsscss-transitions

Saving the subtracted value from a span into a cookie until the checkbox is unchecked - here's how to

I am working on a piece of code that includes numeric values within a span. When the checkbox is clicked, it subtracts 1 from the main value, essentially reducing the total value. How can I achieve this so that even after the form is submitted, the deducte ...

javascriptphpjqueryhtml

Hide the search icon in the MUI datatable while keeping the search bar visible

Working on MUI-datatable, I have set my table options as follows: options:{ search: false, searchOpen: true, ... } As per the documentation, "search:false" is supposed to only hide the icon for the search bar toggle, and searchOpen should display the sear ...

reactjsmaterial-uimui-datatable

Generating a dynamic list by utilizing database data once a button has been clicked

I'm looking to create a feature on my website where clicking on a button will populate a paragraph below it with data retrieved from a database query containing two columns. The first column provides the text for a list, while the second column contai ...

phpjavascripthtmlajax

What is the best way to calculate the number of div elements with a specific class that are contained within parent div elements with another specific class?

Is there a way to count the number of elements with the class '.child' in each container and then add a sentence containing that count inside each container? <div class='container'> <div class='child'></di ...

javascriptjqueryhtml

Navigating the ropes of push-pull functionality in Bootstrap 5

How can I utilize push and pull in Bootstrap version 5.0.0-beta2? In Bootstrap 3, my code looks like this: <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" /> <div class="row"> <d ...

javascripthtmltwitter-bootstrapbootstrap-5

Transforming into a serialized division

I am working on creating a custom WISYWIG editor that generates a div with specific inner elements. The goal is to design the div (along with its inner structure), serialize it, store it in a database as a string or JSON format, and later insert it into th ...

javascripthtml

Updating a React JS State using a Parameter

Is it feasible to develop a function that accepts a parameter (either a string of the state name or the actual state) and then assigns the state related to the parameter? SetState(x) { // Suppose x can be any state we have already defined (it sh ...

javascriptreactjsstatesetstate

Is it possible to concurrently run two instances of ReactI18Next within a single application?

I'm currently attempting to implement 2 separate instances of React-i18Next within the same application. My goal is to have certain parts of the app translated with instance1 and other parts with instance2. I've familiarized myself with createIn ...

javascriptreactjsi18nextreact-i18next

What specific files are required to be placed in the src folder when setting up flow?

I am currently trying to set up flow in my project by following the steps outlined in the official documentation available here. However, I have hit a roadblock at the specific step that instructs users to execute the following command: If you then put ...

reactjsreact-nativenpmflowtypeyarnpkg

How can I efficiently add multiple items to an array and store them in async storage using React Native?

I am trying to store multiple elements in local storage using React Native. I found some helpful documentation on how to do this here. Could someone guide me on the correct way to achieve this? Here's a snippet of my code: My current approach const ...

javascriptreactjsreact-nativelocal-storage