Use a mixin or fragment argument to get a variable

[nrdobie]

I would like to be able to use an argument for a mixin or fragment to dynamically grab the value of a variable. It would also be nice to combine the argument with a string before searching for the variable so that you can find related variables with different content.

Here is what I would like to be able to do:

IN

@define {
  color-twitter: #55ACEE;   /* Twitter's blue */
  color-facebook: #3B5998;  /* Facebook's blue */
  icon-twitter: "\e000";    /* Twitter's character code in icon font. */
  icon-facebook: "\e001";   /* Facebook's character code in icon font. */
}

@fragment social-icon {
  .social.#(0):before {
    background-color: $(color-#(0));
    content: $(icon-#(0));
  }
}

@fragment social-icon(twitter);
@fragment social-icon(facebook);

OUT

.social.twitter:before {
  background-color: #55ACEE;
  content: "\e000";
}

.social.facebook:before {
  background-color: #3B5998;
  content: "\e001";
}

[peteboere]

Variable references cannot be constructed dynamically, so with your example I would do something like the following:

@define {
  color-twitter: #55ACEE;   /* Twitter's blue */
  color-facebook: #3B5998;  /* Facebook's blue */
  icon-twitter: "\e000";    /* Twitter's character code in icon font. */
  icon-facebook: "\e001";   /* Facebook's character code in icon font. */
}

@fragment social-icon {
  .social.#(0):before {
    background-color: #(1);
    content: #(2);
  }
}

@fragment social-icon(twitter, $(color-twitter), $(icon-twitter));
@fragment social-icon(facebook, $(color-facebook), $(icon-facebook));

[nrdobie]

That is what I am currently doing. I think it would be nicer to only have the one argument.

[peteboere]

It would be nicer for your use case, but not a simple change to make unfortunately.