scss 中的插值语法

在 SCSS（Sassy CSS，也就是 Sass 的一个语法变种，全称是 Syntactically Awesome Stylesheets）中，#{变量} 是一种插值（interpolation）的语法，它允许你将变量的值嵌入到选择器、属性名、字符串等中。这种语法让 SCSS 代码更加灵活和动态。

使用场景

1. 选择器：你可以使用插值来动态地构建选择器名。

   $prefix: hover;
   .#{$prefix}-effect {
     background-color: yellow;
   }
   // 编译成 CSS:
   .hover-effect {
     background-color: yellow;
   }
   

2. 属性名：虽然直接在属性名中使用变量并不常见（因为属性名通常是固定的），但在某些动态构建 CSS 属性的情况下，插值可能有用。

   $property: border-top;
   .box {
     #{$property}: 1px solid black;
   }
   // 编译成 CSS:
   .box {
     border-top: 1px solid black;
   }
   

   注意：直接在属性名中使用变量可能不是最佳实践，因为 CSS 属性名通常是静态的。然而，在某些特定场景（如使用 CSS 变量（custom properties）时）下，它可能有用。

3. 字符串：插值在字符串中特别有用，因为它允许你动态地构建字符串。

   $name: "world";
   .hello {
     content: "Hello, #{$name}!";
   }
   // 注意：上面的代码在 SCSS 中实际上不会直接编译成 CSS 的 `content` 属性，因为 CSS 的 `content` 属性通常用于伪元素，并且需要引号包围的字符串或 `url()` 等特殊值。但这里仅用于展示插值在字符串中的用法。
   
   // 更实际的例子，使用伪元素和 `content`：
   .hello::before {
     content: "Hello, #{$name}!";
   }
   // 编译成 CSS:
   .hello::before {
     content: "Hello, world!";
   }
   

注意事项

• 插值语法 #{} 在 SCSS 中非常强大，但使用时也要注意不要过度使用，以免影响代码的可读性和可维护性。
• 在某些情况下，CSS 原生支持的变量（即 CSS 自定义属性，使用 --* 声明）可能是更好的选择，因为它们可以直接在 CSS 中使用，而无需预处理器。然而，CSS 自定义属性的作用域和继承规则与 SCSS 变量不同，需要根据实际情况选择使用。