Adjust the hues using the @for loop in SASS

I am working with a map of colors in SASS that looks like this:

$form-option-colors: (
    1: rgba(242,218,177,1),
    2: rgba(222,186,133,1),
    3: rgba(255,139,107,1),
    4: rgba(237,116,83,1),
    5: rgba(245,98,140,1),
    6: rgba(148,61,112,1),
    7: rgba(49,127,163,1),
    8: rgba(39,101,130,1)
);

My goal is to assign each of these colors to a different div. I attempted to use a @for loop in SASS for this task but encountered Compilation Errors. Here's the code snippet I used for the @for loop:

@for $i from 1 through 8 {
  $color: map.get($form-option-colors, $i);
  .option-#{$i} {
    color: $color;
  }
}

I have 8 distinct .option containers that I am iterating through. How can I resolve this issue and make it work seamlessly?

cssloopssasscolorsfrontend

Answer №1

If you are utilizing the module-function map.get() but haven't imported the module, then you might encounter an issue.

@use "sass:list";
@use "sass:map";

$form-option-colors: (
    "1": rgb(242, 218, 177),
    "2": rgb(222, 186, 133),
    "3": rgb(255, 139, 107),
    "4": rgb(237, 116, 83),
    "5": rgb(245, 98, 140),
    "6": rgb(148, 61, 112),
    "7": rgb(49, 127, 163),
    "8": rgb(39, 101, 130)
);

@for $i from 1 through list.length($form-option-colors) {
  .option-#{$i} {
    color: list.nth(map.values($form-option-colors), $i);
  }
}

To avoid this problem, you can directly call functions by their global name, thus skipping the need to import the module first.

map.get() //module
map-get() //global

But it is not recommended as Sass plans to phase out global functions in the future. Make sure your environment is using Dart-Sass.

Answer №2

The issue was resolved after I imported the necessary module. Appreciate your help!

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

I would like to implement a class within an input element of type "submit"

Can someone help me with this issue I'm having? <input type="submit" class="but" name="versturen" value="Aankopen" action="versturen"> I'm trying to use the input above, but it seems that the class "but" is not being recognized. The CSS ...

htmlcssclass

Ways to append each list item from one unordered list to the end of another based on their unique styles

I am in the process of making a website responsive and I am faced with the task of combining two different menus. In order to achieve this, I need to transfer all list items (li) from one unordered list (ul) to another. Provided below is a simplified vers ...

javascriptjqueryhtmlcss

Discovering elements using the XPath in Selenium WebDriver

Imagine you have a website: <div class="formfonttitle">Wireless - General</div> <div style="margin-left:5px;margin-top:10px;margin-bottom:10px"><img src="/images/New_ui/export/line_export.png"></div> <div c ...

htmlcssxpathselenium-webdriver

The issue with the Bootstrap slider persists

The slider function in the downloaded html and css codes from bootstrap is not working properly. When clicking the arrow, the screen drops below instead of sliding. Even though the code was copied directly from bootstrap, the issue persists. <div c ...

htmlcssslider

Creating a dynamic number of datasets in Chart JSWith Chart JS

After extensive searching, I thought I was on the verge of finding a solution several times, but unfortunately, no luck! I am aware that a similar question was posted yesterday: React Chartjs, how to handle a dynamic number of datasets, but it remains una ...

javascriptajaxloopsdynamicchart.js

Using jQuery to create animated effects for hidden input fields

The struggle to smoothly animate and fade in a hidden text field can be witnessed in this example. The goal is to seamlessly move all elements around the text field and button while fading in/out the hidden element. However, it appears that towards the en ...

jqueryhtmlcss

CSS magic: reveal on hover!

New to coding and encountering a challenge with my hand-coded website. My goal was for a div to change into an arrow when hovered over since the div acts as an anchor link. However, during the build process, only the paragraph inside the div responds to m ...

htmlcsshover

What is the reason behind Facebook's use of margin-left: -9999px to conceal elements?

While experimenting with firebug on Facebook's stream, I stumbled upon an interesting discovery regarding the style of the "update options" menu. It appears that they are hiding this menu by using margin-left: -9999px, and displaying it by overriding ...

css

What are the best ways to ensure that the header design is fully responsive

I recently came across an older website that doesn't seem to be optimized for small screens. It seems to be built using PHP, HTML/CSS/JS but lacks the <meta name="viewport"...> tag in the head section. This has resulted in the content ...

htmlcssresponsive-design

When using jQuery, you can utilize the mouse over event to display elements with the same class within an each loop

I am struggling with a hover effect on my webpage. I have three visible elements and three hidden elements, and I want each visible element to display only one hidden element when hovered over. However, the issue is that currently, hovering over a visible ...

htmljquerycss

The div background image in Vue.js is displaying a 404 not found error

I've encountered an issue while trying to set a background for a div. Strangely, when using the same relative path with an img tag everything works fine, but as soon as I try to achieve the same result with a div, I receive a 404 error. This img tag ...

htmlcssvue.js

Tips for placing the footer at the very bottom of your webpage

After attempting to place the footer at the bottom, I encountered some strange behavior. I am using mui framework. I decided to create a simple example page to illustrate how the footer should be positioned. The code in app.js is as follows: <> < ...

cssreactjsmaterial-uifooter

Aligning a div vertically in the center of its parent container

I am trying to vertically align a child element within its parent element <!DOCTYPE html> <html> <head> <title>Test</title> <style type="text/css"> #body { font-family: sans-serif, arial, 'Roboto'; } #outer ...

javascripthtmlcss

Ways to align an image at the center within a Span

How can I horizontally center an image within a <span> element? https://i.sstatic.net/40IL0.png <div class="col-1"> <span class="dot"> <h:graphicImage library="imgs" name="campus.png" width="25" height="25" style="ali ...

htmlcssbootstrap-4

Swapping the icon in the panel heading of Bootstrap 3 Collapse based on its collapse status

Despite many attempts, I haven't been able to make any of the provided answers work in my code. My setup involves using Bootstrap 3 panels and collapse functionality to display advertisements. In the default view, only the advertisement heading is vi ...

javascriptjquerycsstwitter-bootstrap

What is the best way to vertically flip a background image that is repeating along the y axis in CSS?

I am in the process of developing a mobile web app and I need assistance with flipping the background image when it repeats along the y-axis. Can someone guide me on how to achieve this using CSS or JavaScript? https://i.stack.imgur.com/b107V.jpg var el ...

javascripthtmlcss

How can we effectively incorporate dynamic CSS & SVG values using PHP?

Currently, I am developing a basic system to manage pages across multiple domains. My plan is to store values in a database and use them to generate a page. These values will include color values that I want to dynamically inject into both a CSS file and ...

phpmysqlcsssvg

Adjusting the decimal points of numbers within a table to create the illusion of a "centered" alignment within the cell

Looking for a table design featuring a column of decimal numbers, each with varying lengths before and after the decimal point, while keeping the decimal points aligned. The width of the column should be flexible, expanding to accommodate long numbers in ...

htmlcsshtml-tablealignmentdecimal

I am currently grappling with a JavaScript mouse over event and encountering some difficulties

I am looking to dynamically change the background image of my body div whenever a link is hovered over. Here is a snippet of my code: JAVASCRIPT: var i = 0, anchors = document.querySelectorAll("zoom"), background = document.getElementById("body") ...

javascripthtmlcss

CSS: The grid-column and grid-row properties are malfunctioning

I'd like to create a grid with one column containing multiple rows of text, and the second column having an equal number of input rows. My initial plan was to create a grid where the number of rows equals the number of lines of text, and then define t ...

htmlcsscss-grid