Sass 中的插值(Interpolation)是一种强大的特性,它允许你在 Sass 代码中嵌入变量、选择器、属性名或任何其他 Sass 表达式,并动态地生成 CSS 代码。插值通过 #{}
语法来实现。
Sass 插值简介
Sass 插值允许你创建可动态生成内容的代码片段。这对于创建可复用的样式模式、响应式设计或根据变量生成 CSS 类名等情况特别有用。插值可以出现在 Sass 代码的几乎任何地方,包括选择器、属性名、属性值等。
Sass 插值使用方法
-
在选择器中使用插值:
你可以使用插值来动态生成选择器。$name: hover; .btn-#{$name} {background-color: blue; }// 编译为: // .btn-hover { // background-color: blue; // }
-
在属性名中使用插值:
插值也可以用于动态生成 CSS 属性名。$border-direction: top; .element {border-#{$border-direction}-color: red; }// 编译为: // .element { // border-top-color: red; // }
-
在字符串中使用插值:
你可以将 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; // }
-
在 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; // }
-
在函数和混合中使用插值:
插值也可以用于函数和混合的参数中。@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 代码或根据变量值改变样式时。