What does the hash (#) sign do outside the outer loops in SASS?

Question

I just met the use of the hash symbol outside the loop in sass, and I'm not sure what it was used for or why.

What is the difference between these two examples? Both of them output the same css, but the first does not allow to use only classes. Why is the first example used in some places?

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

Answer 1

#{} used to interpolate strings: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#interpolation_

There is one exception to this: although using interpolation # {}, quoted lines are incorrect. This makes it easier to use, for example, selector names in mixins. For example.

Therefore, this method is sometimes used to enable the use of sass values ​​in selectors. For example:.

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

Now to your question. I really see no reason why anyone would use string interpolation in this selector:

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

My best guess is that the sass variable will be added later to this selector, or the selector will be completely replaced by the variable.