SCSSではシャープ（＃）（例：＃{$ variable}）の意味は何ですか？

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_

一つの例外はしかし、これにあります：＃{}補間を使用する場合、引用されました文字列は引用符で囲まれていません。これは、例えば、ミックスインのセレクター名。例えば。

このテクニックは、時にはセレクタでSass値を使用できるようにするために使用されます。例：

$gutter: 10; 

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

今すぐご質問ください。

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

私の最高の推測では、SASS変数はそのセレクタに後から追加される、またはセレクタが完全に変数に置き換えられますということです。私は本当に誰もがこのセレクタで文字列の補間を使用する理由何らかの理由が表示されません。

Answer 3

{}と組み合わせると、interpolatedである必要があります。

つまり、変数の値で置き換えられます。