hash(#)符号在SASS中执行外部循环是什么?

时间:2014-07-22 11:01:52

标签: css sass

我刚刚在sass的循环外部使用了哈希符号,我不确定它的用途是什么或原因是什么。

这两个例子有什么区别?它们都输出相同的css,但第一个不允许只有类元素。为什么在某些地方使用第一个例子?

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

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

1 个答案:

答案 0 :(得分:19)

#{}用于字符串插值:http://sass-lang.com/documentation/file.SASS_REFERENCE.html#interpolation_

  

但是有一个例外:当使用#{}插值时,引用的字符串是不加引号的。这使得它更容易使用,例如mixins中的选择器名称。例如。

因此,有时使用此技术允许在选择器中使用sass值。 E.g:

$gutter: 10;

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

现在回答你的问题。我真的没有看到任何人在这个选择器中使用字符串插值的原因:

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

我最好的猜测是sass变量稍后会添加到该选择器中,或者选择器将完全替换为变量。