CODEWITHSUNDEEP
arrayssass
Lolo
Lolo

Reputation: 537

SASS : Using lists as associative array

I have this kind of list 

$colors : (
    (redG, #ff0000, #ffffff),
    (blueG, #00ff00, #ff4544),
    (greenG, #0000ff, #123456)
);

and I'd like to do something like

a {
    background-color: $colors[redG, 1]
    color: $colors[redG, 2]
}

Thanx

Upvotes: 1

Views: 744

Answers (1)

Stephen C
Stephen C

Reputation: 863

You could use nested maps along with a function like such:

$colors : (
  redG : (
    1 : #ff0000,
    2 : #fff
  ),
  blueG : (
    1 : #00ff00,
    2 : #ff4544
  ),
  greenG : (
    1 : #0000ff,
    2 : #123456
  )
);

@function color($color, $position: 1) {
  @return map-get(map-get($colors, $color), $position)
}

a {
    background-color: color(redG, 1);
    color: color(redG, 2);
}

a {
    background-color: color(blueG, 1);
    color: color(blueG, 2);
}

a {
    background-color: color(greenG, 1);
    color: color(greenG, 2);
}

Which will return:

a {
  background-color: #ff0000;
  color: #fff;
}

a {
  background-color: #00ff00;
  color: #ff4544;
}

a {
  background-color: #0000ff;
  color: #123456;
}

Upvotes: 2

Related Questions