0

This is my initial context.

I receive from a third party a list of sass variables, and I can't change the shape of this data:

$green-primary-1: green;
$green-secondary-2: aqua;
$green-secondary-3: grey;
$red-primary-1: green;
$red-secondary-2: aqua;
$red-secondary-3: grey;
$blue-primary-1: green;
$blue-secondary-2: aqua;
$blue-secondary-3: grey;
// data represented here is fake
// ...

Then I've a function, that includes some logic and it returns the string of the name one of the previous sass variables, listed above:

@function get_var_name($param1, $param2) {
  // logic
  // ...

  @return "green-secondary-2";
}

And this function is used in some sass code to (try to) retrieve the content precisely of the specific named variable:

span {
  color: #{#{get_var_name('param1', 'param2')}};
}

and I'm expecting this output

span {
  color: aqua;
}

Instead I'm getting this:

span {
  color: green-secondary;
}

Please, do not provide css variables approach as answer, or maps solution for my initial source of data or something different from the question context.

My mandatory input is some sass variables. My mandatory output is css property handled dynamically with these variables names.

Am I not seeing something obvious? Because I can't really make it work... And I feel it should be something stupid. Thanks anyway

axel
  • 3,778
  • 4
  • 45
  • 72
  • Does this answer your question? [Creating or referencing variables dynamically in Sass](https://stackoverflow.com/questions/8533432/creating-or-referencing-variables-dynamically-in-sass) – Arkellys Nov 15 '21 at 14:37
  • The thing is, I do not have a map for source of variables. I've a list of `scss` variables. That is a requirement I can't change. Maybe what I'm trying to achieve is not possible with a function. – axel Nov 15 '21 at 14:54
  • Maybe it is not possible, since the output is based on information written in build time, and it simply not possible, that is it – axel Nov 15 '21 at 16:18
  • When you say you have a list of scss variables, do you mean a [sass list](https://sass-lang.com/documentation/values/lists)? – Arkellys Nov 15 '21 at 21:01
  • No I mean "a bunch of", "some" – axel Nov 15 '21 at 21:50
  • I think your question is missing some context because I can't understand why you can't use the variables directly or at the very least make a map with them as suggested by ThePeasantLife. – Arkellys Nov 16 '21 at 06:33
  • I tried to be more explicit. @Arkellys – axel Nov 16 '21 at 07:30
  • Why not make a map of your color variables and then use `map-get($colors, get_var_name('param1', 'param2'))`? – Arkellys Nov 16 '21 at 07:58
  • Because I receive the list from third party, it can change with time, accordingly to some conventions naming, also implemented in the logic of that function. But no I can't make a map. – axel Nov 16 '21 at 08:17
  • I don't think what you are asking is possible then. – Arkellys Nov 16 '21 at 10:19

2 Answers2

0

This should solve it for you. No need for a function to return a sass variable

span { 
  color: $green-secondary;
}

Edit - Option 1 - maps

However, I don't know why you need the function? Can't you do something like this to achieve what you want. You could just make a map object on Sass with all variants

$theme-colors: () !default;
$theme-colors: map-merge((
  "hello":      #fff,
  "world":      #000
), $theme-colors);

Lets say I want to the hello value, I could use a map-get(variable_name, key)

map-get($theme-colors, "hello")

which would value from the key from that sass variable.

Edit - Option 2 - Using root

Another thing to note, you could do this via the :root and you can access a variable from the root in your css

span { 
  color: var(--hello);
}

:root {
  --hello: #fff
}

https://codepen.io/ciaabird/pen/PoKxZvz

ThePeasantLife
  • 66
  • 6
  • my `function`, the rest of the code, is much more complex than this one, I can't follow this approach, but thanks for the attempt – axel Nov 15 '21 at 13:10
  • I've just updated my comment, see if that helps anymore :) – ThePeasantLife Nov 15 '21 at 13:11
  • I also edited the question, to give more context for a possible answer – axel Nov 15 '21 at 13:13
  • I also don't have to do that via css variables, it has to be specifically done for `scss` variables – axel Nov 15 '21 at 13:19
  • If the SCSS variable is in the root, you can access it anyway surely? I've quickly made this codepen for you, hope this helps clarify. I've put both of the solutions in the comment in there, you can just comment either or in to show them working :) https://codepen.io/ciaabird/pen/PoKxZvz – ThePeasantLife Nov 15 '21 at 13:29
  • Unluckily scenario is exactly represented in the question and can't be changed with css variables or root variables. – axel Nov 15 '21 at 13:49
0

As of today, it seems interpolation is possible only in these scenarios:

  • Selectors in style rules
  • Property names in declarations
  • Custom property values
  • CSS at-rules
  • @extends
  • Plain CSS @imports
  • Quoted or unquoted strings
  • Special functions
  • Plain CSS function names
  • Loud comments

and apparently this is not the case of the question.

axel
  • 3,778
  • 4
  • 45
  • 72