散列（＃）符号在SASS中的外部循环是什么？ [英] What does hash (#) sign do outside loops in SASS?

问题描述

我刚刚在sass中碰到了一个循环之外的哈希符号，我不知道它的用途是什么，或者是什么原因。

I've just come across the use of the hash sign outside of a loop in sass and I'm not sure what it's used for or what the reason for it is.

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

What's the difference between these two examples please? They both output the same css but the first doesn't allow classes only elements. Why is the first example in use in some places?

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

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

推荐答案

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

但有一个例外：当使用＃{ }插值，引用的字符串不引用。这使得更容易使用。 mixins中的选择器名称。例如

There is one exception to this, though: when using #{} interpolation, quoted strings are unquoted. This makes it easier to use e.g. selector names in mixins. For example.

因此，这种技术有时用于允许在选择器中使用sass值。例如：

So this technique is used sometimes to allow using sass values in selectors. E.g.:

$gutter: 10;

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

我真的没有看到任何人为什么会在这个选择器中使用字符串插值的任何原因：

Now to your question. I really don't see any reason why would anybody use string interpolation in this selector:

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

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

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

这篇关于散列（＃）符号在SASS中的外部循环是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！