Iterating through a SASS map and retrieving the next item in the loop

Question

Iterating through a SASS map and retrieving the next item in the loop

I am working with a color array that looks like this:

$colors: (
  'primary': '#aaa',
  'secondary': '#bbb',
  'color-3': '#ccc',
  'color-4': '#ddd',
  'color-5': '#eee',
);

My goal is to automate the creation of classes in a loop, similar to this:

@each $col in map-keys($theme-colors){
    &.btn-#{$col} {
      background-color: map-get($theme-colors, $col);
      &:hover{
        background-color: map-get($theme-colors, $col + 1); // <= my issue lies here in getting "$col + 1"
      }
    }
  }

The concept is to have a class btn-primary with a primary color background and, on hover, switch to the secondary color as the background.

For the class btn-secondary, it should have a secondary color background and change to color-3 on hover, and so on for other classes.

Any suggestions on how I can achieve this functionality?

Thank you! :)

css sass

Answer 1

Answer №1

If you're looking for a solution, check out this link: https://github.com/elcheio/sass-map-get-next-prev

By using the map-get-next function provided, you can easily solve your problem.

To get started, simply copy and paste the function into your code (^_^;)

@function map-get-next($map, $key, $fallback: false, $return: value) {
    // Function logic here
}

Next, define your map like this:

$colors: (
  'primary':   #aaa,
  'secondary': #bbb,
  'color-3':   #ccc,
  'color-4':   #ddd,
  'color-5':   #eee,
);

Lastly, iterate through the map pairs with an @each loop:

@each $name, $value in $colors{
  .btn-#{$name} {
    background-color: $value;
    &:hover{
      background-color: map-get-next($colors, $name, #ffffff); 
    }
  }
}

After completing these steps, your output will look like this:

.btn-primary {
  background-color: #aaa;
}
.btn-primary:hover {
  background-color: #bbb;
}

// More generated CSS goes here...

Answer 2

If you're looking for a solution, check out this link: https://github.com/elcheio/sass-map-get-next-prev

By using the map-get-next function provided, you can easily solve your problem.

To get started, simply copy and paste the function into your code (^_^;)

@function map-get-next($map, $key, $fallback: false, $return: value) {
    // Function logic here
}

Next, define your map like this:

$colors: (
  'primary':   #aaa,
  'secondary': #bbb,
  'color-3':   #ccc,
  'color-4':   #ddd,
  'color-5':   #eee,
);

Lastly, iterate through the map pairs with an @each loop:

@each $name, $value in $colors{
  .btn-#{$name} {
    background-color: $value;
    &:hover{
      background-color: map-get-next($colors, $name, #ffffff); 
    }
  }
}

After completing these steps, your output will look like this:

.btn-primary {
  background-color: #aaa;
}
.btn-primary:hover {
  background-color: #bbb;
}

// More generated CSS goes here...

Iterating through a SASS map and retrieving the next item in the loop

Answer №1

Similar questions

A see-through section with a border that fades in transparency

Hide all elements in jQuery that do not have a class assigned

Is there a way to choose multiple IDs in this code that all share a common word?

Tips for aligning a div within a flexbox to the bottom position

Swap the Text for a Button

Can we find a solution to optimize "Crystal Reports" for mobile browsers and make it responsive?

Creating a dynamic mouse trail effect using CSS and JavaScript without compromising element clickability

Exploring the Power of JQuery with Hover Effects and SlideToggle

What does the error message "Uncaught TypeError: Cannot access property 'style' of an undefined object" mean?

Trouble with Z-index on FireFox when using absolute positioning

Arrange the buttons within the container

Ways to automatically adjust the margins of my HTML body page

What steps can I take to fix the Error with webpack's style hot loader JavaScript?

Create a webpage in full screen mode with a video player that fills the entire screen

When attempting to shift the label above the input field upon focusing, it unexpectedly becomes concealed

A guide on choosing a custom button color and automatically reverting to its original color when another button is clicked

Various results can be produced based on the .load() and .resize() or .scroll() functions despite using the same calculation methods

Troubleshooting the Missing Border Issue in Tailwind Form Fieldset [Code Snippet Included]

Incorporating Cascading Style Sheets (CSS) to

Seamless animation when collapsing element using angular and css exclusively