Syntax of entering a variable into an attribute name?

Question

So I set a variable like this:

$variable-name: left;

and in my css I have a style for the attribute border-left

If I want to substitute the variable into the name of the attribute I use this syntax:

border-#{$variable-name}:

I have never seen this hashtag -> curly brackets business with substituting in variables.

Does this syntax have some broader significance, or is it just something that is used in this circumstance?

Thank you so much for taking the time to read my question and those who respond with help are immensely kind.

This is missing some context, as you are clearly using something that generates CSS without saying or tagging what it is. — JayC, Sep 08 '13 at 05:14
Okay, another challenge came up where we had to do something similar. I think the syntax I mentioned above is in fact the correct syntax. I'm not going to close this question just in case anybody decides to weigh in. — macsplean, Sep 08 '13 at 21:36

score 15 · Answer 1 · answered Sep 18 '13 at 08:24

Basically, the extra #{} stuff interpolates the variable. In other words it changes it into plain CSS as opposed to just dumping the variable as you typed it (which is fine for colours, for example).

See here:

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#variables_

and

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#interpolation_

An example:

SASS

$variable-name: "left";
$font: "Lucida Grande";

.something{
font-family: $font;
font-family: #{$font};
border-#{$variable-name}: 1px solid red;
}

CSS

.something {
   font-family: "Lucida Grande";
   font-family: Lucida Grande;
   border-left: 1px solid red;
}

As you can see using #{} will render the output exactly as what's inbetween the quotes whereas simple variable declaration will just output the whole thing.

I tend to use the interpolated output for file paths eg:

$filePath: "/extras/images/"

background-image: url(#{$filePath}imageName.png);

which gives

background-image: url(/extras/images/imageName.png);

Hope this helps ?

Syntax of entering a variable into an attribute name?

1 Answers1