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

Tips for embedding Javascript code within the window.write() function

I have a JavaScript function that opens a new window to display an image specified in the data variable. I want the new window to close when the user clicks anywhere on it. I've tried inserting some JavaScript code within window.write() but it doesn&a ...

javascriptphphtmlwindow.open

What is the best way to create a cornered button using CSS?

Is there a way to create a button using only CSS? https://i.stack.imgur.com/7mjVV.png This is the code I've come up with so far: .customButton { width: 100px; height: 100px; background: #6d1a3e; position: relative; transform: rotate(-90 ...

css

Breaking the line when combining an image_tag and text in a Rails navbar

Looking for some help combining a logo and brand name in my Bootstrap navbar. I'm running into an issue where there is a line break separating the logo and text. Can someone provide some assistance? <%= link_to image_tag("brand_logo.png") + " Bran ...

htmlcssruby-on-railstwitter-bootstrap

Is it possible for a div to extend beyond the previous div's boundaries using CSS?

When viewing a website like GameFAQs, you may notice that there are two divs positioned next to each other - the main content and an aside (such as a poll). As you resize the window, the aside sometimes moves down below the main content without leaving any ...

htmlcss

Issue with JQuery on Mobile Devices: Troubles with Dropdown Menu and Loading Function

Having some trouble with my JQuery code on mobile devices. The drop down menu isn't showing up on an iPhone, the load function isn't working to display the additional PHP page on a Samsung Edge 7, and the drop down doesn't seem to be functio ...

javascriptphpjqueryhtmldropdown

How can one ensure the preservation of array values in React?

I'm struggling to mount a dynamic 'select' component in React due to an issue I encountered. Currently, I am using a 'for' loop to make API calls, but each iteration causes me to lose the previous values stored in the state. Is t ...

javascriptreactjsselectinfinite-loop

Issues with implementing CSS Icon Generated Content on a live Azure Web Role

My dilemma lies with my MVC4 web application that I'm attempting to deploy as an Azure web role. The site incorporates Metro UI CSS. While the deployed web role is functioning properly overall, I am encountering an issue with the CSS-generated conten ...

c#cssasp.net-mvc-4azureazure-web-roles

Expanding the reach of the navigation bar

Hello Everyone, Is there a way to stretch my navigation bar so that the links are evenly spaced out across the browser window instead of being clustered together? I want it to be responsive rather than fixed in size. This is my HTML code: <div class= ...

javascripthtmlcss

Learn the process of adjusting opacity for a specific color in CSS

At the moment, this is the code I'm using to apply a color to an element using jss. const styleSheet = theme => ({ root: { backgroundColor: theme.colors.red, }, }) I am interested in finding out if there is a way to add opacity based o ...

javascriptreactjsmaterial-uijss

PHP: Link to logo in different folder by including 'nav.php'

I am facing an issue with my nav.php file: <div> <!-- there's a lot of code here so I want to write it once and include it in all pages within the main folder as well as subfolders <img src="logo.png"> </div> The structur ...

javascriptphphtmlcss.htaccess

Design the parent element according to the child elements

I'm currently working on a timeline project and I am facing an issue with combining different border styles for specific event times. The main challenge is to have a solid border for most of the timeline events, except for a few instances that share a ...

javascriptjqueryhtmlcsstimeline

Having issues implementing CssBaseline

I referred to the solutions provided in this thread but encountered an error. TypeError: Object(...) is not a function const theme = createMuiTheme(); My goal is to apply default styles using <CssBaseline />. How can I achieve this? Below is my imp ...

reactjsmaterial-ui

Troubleshooting a problem with the transition of the hamburger menu icon in SC

I'm encountering an issue with the transition property and attempting to utilize the all keyword. After including a fiddle, I can't seem to figure out if I've made a simple mistake or if there is something else going on. I have seen the all ...

htmlcsssass

The `<Outlet/>` from react-router is being rendered in a location outside of its intended wrapper div

Utilizing MUI for crafting a straightforward dashboard featuring an <AppBar>, a side <Drawer>, my component appears as follows: <> <AppBar> // code omitted <AppBar/> <Drawer> // code omitted <Drawer/> / ...

javascriptcssreactjsmaterial-uireact-router

Unable to assign a height of 100% to the tr element or a width of 100% to the

While inspecting the elements, I noticed the presence of <tbody>, within which <tr> is nested. The issue arises when the tbody element has 100% height and width as intended, but <tr> always falls short by 4 pixels in height even when styl ...

htmlcss

What is the process for deleting a token from local storage and displaying the logout page in Next JS?

I developed a Next.js web application and am looking to display a logout page when the token expires, while also removing the expired token from local storage. How can I ensure that this functionality works no matter which page the user visits within the a ...

javascriptreactjsnext.jslocal-storagetoken

What is the process for retrieving the text element from a React component when using React.cloneElement?

Can I centralize a translation function for all table header elements? const CustomersTable = () => { var headers=<> <th>Name</th> <th>Age</th> <th>Another text</th> </> ...

javascriptreactjslocaleglobalization

Having trouble with CSS text not wrapping correctly?

While working on a web application, I encountered an issue where the text within a <div> element on my page was not wrapping properly and instead overflowing outside the box. The <div> in question goes through two stages: one where it is not e ...

cssoverflowwhitespace

Sliding Navigation Panel

Currently, I am attempting to implement a sidebar push navigation that mimics the one showcased here. My HTML structure includes content within a center element div. The code snippet is as follows: <div id="mySidenav" class="sidenav"> <a href="j ...

css

How can I convert a list of checkboxes, generated by ng-repeat, into multiple columns?

Here is the HTML code snippet: <div class="checkbox"> <label> <input type="checkbox" ng-model="selectedAll.value" ng-click="checkAll()" />Check All </label> </div> <div class="checkbox" ng-repeat="carType i ...

javascripthtmlangularjstwitter-bootstrapcheckbox