Синтаксис ввода переменной в имя атрибута?

Question

Так что я установить переменную так:

$variable-name: left; 

и в моем CSS У меня есть стиль для атрибута границы левого

Если я хочу, чтобы заменить переменную во имя атрибута, я использую этот синтаксис:

border-#{$variable-name}: 

Я никогда не видел этот хэштегов -> фигурные скобки с заменой переменных.

Имеет ли этот синтаксис более широкое значение, или это просто то, что используется в этом случае?

Большое вам спасибо за то, что нашли время, чтобы прочитать мой вопрос, и те, кто отвечает с помощью, очень любезны.

Answer 1

В основном, дополнительный # {} материал интерполирует переменную. Другими словами, он меняет его на простой CSS, а не просто набрасывает переменную, как вы ее набрали (что подходит для цветов, например).

Смотрите здесь:

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

и

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

Пример:

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; 
} 

Как вы можете видеть, используя # {} сделает вывод точно, как то, что между ними кавычки, тогда как простое объявление переменной будет просто выводить всю вещь.

Я предпочитаю использовать интерполированный выход для пути к файлам, например:

$filePath: "/extras/images/" 

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

который дает

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

Надеется, что это помогает?