SASS can I compose a variable name with a string and list value

Question

I have a number of SASS variables that reference SVG icons. Below is a simplified example:

I would like to be able to loop through a list of strings and compose the SASS variable name in a way that's presented using the background style of the icon-checkbox class. My approach so far does not work. Can I anyone show me how/if this can be done in SASS.

$icon-trash-grey: "data:image/svg+xml;charset=UTF-8,<svg data>";
$icon-save-grey: "data:image/svg+xml;charset=UTF-8,<svg data>";

$icon-list: trash, save; // list of icon names
    
.icon-checkbox {
    each $key in $icon-list {
        background: url($icon-#{$key}-grey);
        // other styles
    }
}

Thanks in advance

ksav · Accepted Answer · 2018-11-02 09:34:55Z

1

The following SASS

$icon-trash-grey: "data:image/svg+xml;charset=UTF-8,<svg data>";
$icon-save-grey: "data:image/svg+xml;charset=UTF-8,<svg data>";  

$icon-map: (
  trash: $icon-trash-grey, 
  save:  $icon-save-grey,
);

.icon{
  @each $key, $value in $icon-map {
      &.#{$key} {
          background: url($value);
      }
  }
}

renders this CSS

.icon.trash {
  background: url("data:image/svg+xml;charset=UTF-8,<svg data>");
}
.icon.save {
  background: url("data:image/svg+xml;charset=UTF-8,<svg data>");
}

You can have a look, make edits or fork this Sassmeister

edited Nov 2, 2018 at 9:34

answered Nov 2, 2018 at 9:19

ksav

20.9k6 gold badges52 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2190690 Over a year ago

Thanks for your reply, however the returned String is not a SASS variable name...it's just a string. My question's goal is to compose a SASS variable name.

ksav Over a year ago

I've updated the answer with map that references the desired variables.

Ozturk Can Gokkaya · Accepted Answer · 2018-11-02 09:25:38Z

1

Try this :

$icon-list : (
  "icon-trash-grey": "data:image/svg+xml;charset=UTF-8,<svg data>",
  "icon-save-grey": "data:image/svg+xml;charset=UTF-8,<svg data>"
); 

@each $key, $val in $icon-list {
  .#{$key} {
    background: url($val);
  }
}

answered Nov 2, 2018 at 9:25

Ozturk Can Gokkaya

3351 gold badge2 silver badges8 bronze badges

1 Comment

user2190690 Over a year ago

Hi that works for the context you've provided but my goal is specific to composing a SASS variable name.

Collectives™ on Stack Overflow

SASS can I compose a variable name with a string and list value

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related