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

Using FEWER loops to create column classes on Twitter - What is their functionality?

Height of dropdown items in the horizontal navbar

What Is Preventing Fields from Being Filled in the Drop-Down Menu?

My divs seem to overlap in strange, unpredictable ways depending on the zoom level - it's an odd phenomenon that occurs

Unable to modify the background image of a div using jQuery

Adjustable DIV based on screen size

Connections transition among associated HTML pages

How to make Firefox create a new line in a contenteditable field

Colorful radial spinner bar

Disabling the ability to edit the rightmost portion of an input number field

What is the best way to delete HTML classes that were generated by a function?

Tips for loading a webpage with optimal speed and efficiency

Is there a way to align the image to the left within the div contained in my header section?

Using JQuery to trigger CSS3 animations on one element when clicking on another

I need help with importing CSS in Vue.js

Tips for automatically resizing a canvas to fit the content within a scrollable container?

Just getting started with JavaScript and running into trouble creating an array of image objects using an array of strings

Increase the height and width of the inner divs to match the outer div while reducing the number of inner divs

Boundaries on Maps: A guide to verifying addresses within a boundary

Utilizing CSS to create a repeating background image within a specified container