Co robi znak skrótu (#) w pętli zewnętrznej w SASS?

Question

Właśnie natknąłem się na użycie znaku krzyżyka poza pętlą w sassie i nie jestem pewien, do czego jest używany i jaki jest tego powód.

Jaka jest różnica między tymi dwoma przykładami? Oba wyprowadzają te same wartości css, ale pierwsza nie pozwala na elementy klasy. Dlaczego pierwszy przykład jest używany w niektórych miejscach?

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

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

Answer 1

#{} służy do interpolacji smyczkowy: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#interpolation_

Jest jeden wyjątek od tej, ale: przy użyciu # {} interpolacja, cytowany ciągi są cytowane. Ułatwia to użycie np. nazwy selektorów w mixins. Na przykład.

Ta technika jest używana czasami, aby umożliwić użycie wartości sass w selektorach. Np .:

$gutter: 10; 

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

Teraz na twoje pytanie. I naprawdę nie widzę żadnego powodu, dla którego ktoś miałby użyć interpolacji ciąg w tym selektora:

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

Mój najlepszy przypuszczenie to, że zmienna Sass zostaną dodane później do tego selektora lub selektor zostaną całkowicie zastąpione zmiennej .