【sass插值语句 #{}简介以及使用方法】

Sass 中的插值（Interpolation）是一种强大的特性，它允许你在 Sass 代码中嵌入变量、选择器、属性名或任何其他 Sass 表达式，并动态地生成 CSS 代码。插值通过 #{} 语法来实现。

Sass 插值简介

Sass 插值允许你创建可动态生成内容的代码片段。这对于创建可复用的样式模式、响应式设计或根据变量生成 CSS 类名等情况特别有用。插值可以出现在 Sass 代码的几乎任何地方，包括选择器、属性名、属性值等。

Sass 插值使用方法

1. 在选择器中使用插值：
   你可以使用插值来动态生成选择器。

   $name: hover;
   .btn-#{$name} {
     background-color: blue;
   }
   
   // 编译为：
   // .btn-hover {
   //   background-color: blue;
   // }
   

2. 在属性名中使用插值：
   插值也可以用于动态生成 CSS 属性名。

   $border-direction: top;
   .element {
     border-#{$border-direction}-color: red;
   }
   
   // 编译为：
   // .element {
   //   border-top-color: red;
   // }
   

3. 在字符串中使用插值：
   你可以将 Sass 变量插入到字符串中。

   $font-stack: Helvetica, sans-serif;
   $primary-color: #333;
   
   body {
     font: 100% #{$font-stack};
     color: #{$primary-color};
   }
   
   // 编译为：
   // body {
   //   font: 100% Helvetica, sans-serif;
   //   color: #333;
   // }
   

4. 在 URL 中使用插值：
   对于背景图片或其他需要 URL 的属性，你可以使用插值来动态指定路径。

   $img-path: "images/";
   $img-name: "background";
   $img-ext: ".png";
   
   body {
     background: url(#{$img-path}#{$img-name}#{$img-ext}) no-repeat;
   }
   
   // 编译为：
   // body {
   //   background: url("images/background.png") no-repeat;
   // }
   

5. 在函数和混合中使用插值：
   插值也可以用于函数和混合的参数中。

   @mixin adjust-color($color, $adjust: 10%) {
     background-color: lighten($color, $adjust);
   }
   
   $color: #666;
   
   .dark {
     @include adjust-color($color, 20%);
   }
   
   // 编译为：
   // .dark {
   //   background-color: #999;
   // }
   

使用插值，你可以创建更加灵活和可维护的 Sass 代码，特别是在需要动态生成 CSS 代码或根据变量值改变样式时。