Что означает резкое (#) (например, # {$ variable}) значение в SCSS?

Question

Я проверял статью и наткнулся на что-то вроде следующего:

$desktop-width: 1024px; 

@mixin desktop { 
    @media(min-width: #{$desktop-width}) { 
    ... 
    } 
} 

И было интересно, почему использование резкой (#)? Разве вы не можете сделать min-width: $desktop-width?

Спасибо заранее и принять ответ/до голосования

Answer 1

#{} несет ответственность за интерполяцию строк, поэтому в приведенном выше примере она не нужна и может быть опущена.

Answer 2

#{} используется для интерполяции строк: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#interpolation_

Существует одно исключение, однако: при использовании # {} интерполяции, цитируемый строки не сортируются. Это облегчает использование, например, имена селекторов в mixins. Например.

Так что этот метод используется иногда, чтобы разрешить использование значений sass в селекторах. Например:

$gutter: 10; 

.grid#{$gutter} { 
    background: red; 
} 

Теперь на ваш вопрос. Я действительно не вижу никаких причин, почему бы кто-нибудь использовать интерполяцию строки в этом селекторе:

#{h1, h2, h3, h4, h5} 
{ 
    color: #000; 
} 

Мое предположение, что дерзость переменная будет добавлена ​​позже в этот селектор или селектор будет полностью заменен переменной ,

Answer 3

Он в сочетании с {} указывает на то, что должно быть interpolated.

i.e заменено значением переменной.