Syntax of entering a variable into an attribute name? [duplicate]

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.

Answer 1

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 ?