什么是Sass插值

发布时间：2023-05-26 13:28:05 所属栏目：教程来源：

导读：在很多编程器语言中都有插值这个概念，在 Sass 样式表的任何地方几乎都可以使用插值，你可以将这些包裹在 #{} 中来使用，所以记住在 Sass 中使用插值的方式是 #{} ，本节我们一起来看一下插值在 Sass 中的使用场景以

在很多编程器语言中都有插值这个概念，在 Sass 样式表的任何地方几乎都可以使用插值，你可以将这些包裹在 #{} 中来使用，所以记住在 Sass 中使用插值的方式是 #{} ，本节我们一起来看一下插值在 Sass 中的使用场景以及它的语法～

什么是插值？

插值也就是可以在特定的区域插入一段表达式或者插入一个变量，以此来实现内容动态变换的需求。

语法示例

我们先来看一段官网给出的 Sass 代码来直观感受一下插值是什么样的：

@mixin corner-icon($name, $top-or-bottom, $left-or-right) {
.icon-#{$name} { // 使用了插值
background-image: url("/icons/#{$name}.svg");
position: absolute;
#{$top-or-bottom}: ; // 使用了插值
#{$left-or-right}: ; // 使用了插值
}
}
@include corner-icon("mail", top, left);
上面这段代码一眼看去挺复杂的，不要慌！这是 Sass 中的混合指令，在后面的 Sass 混合指令中我们会详细的讲解它，在本节你只需要知道插值可以在混合指令中使用。在上面的代码中我标注了哪里使用了插值，你可以感受下记住它长什么样子，这三处都使用插值插入了变量的值，这段代码将会被转换为如下的 CSS 代码：

.icon-mail {
background-image: url("/icons/mail.svg");
position: absolute;
top: ;
left: ;
}

使用场景

上面的语法示例你感受了插值的写法，这里我们开始详细讲解插值的各种使用场景，除了上面所示例的在 Sass 指令中可以使用外，它还可以应用于以下的一些场景：

在选择器中使用
在属性名中使用
在属性值中使用
在注释中使用
这里我们暂且详细讲解这四种使用场景，在 Sass 指令和在 Sass 函数中也是可以使用的，不过我们会在其对应的章节再去做讲解。下面我们先看下这四种使用场景。

在选择器中使用

我们一般在写页面的时候会为 DOM 元素定义一些 class 或 id ，当我们为其写样式的时候会用不同的选择器，那么在选择器中我们可以使用插值来拼接一些类名等等，我们举个例子来看下：

$name: item;
.ul-#{$name} { // 使用插值
width: px;
.li-#{$name} { // 使用插值
width: ;
}
}
.Box-#{$name} { // 使用插值
height:px;
.#{$name} { // 使用插值
height:;
}
}
可以看到上面的代码，我制定了一个 DOM 层级结构，这种结构也是很常见的，可能很多子元素的类名我们都带有 item ，那么我们就可以把它提取为一个变量然后通过在选择器中应用插值来拼接，这样就很方便我们维护，我们想改子元素类名的时候就不需要逐一的去更改了。上面这段 Sasd 代码转换为 CSS 如下：

.ul-item {
width: px;
}
.ul-item .li-item {
width: ;
}
.Box-item {
height: px;
}
.Box-item .item {
height: ;
}

在属性名中使用

除了在选择器中使用，在 Sass 属性名上也是可以使用插值的，也就是说你在写 CSS 属性名的时候你也是可以使用插值来拼接的，我们举个例子来看下：

$name: color;
$position: top;
body {
background-#{$name}: red;
border-#{$name}: blue;
padding-#{$position}: px;
margin-#{$position}: px;
#{$position}: px;
}
可以看到上面的代码中我对 CSS 的属性名使用了插值，可以用这种方式来拼接属性名，不过在实际项目中不是很常用，一般都是在指令里这么运用，就像在前面语法示例中举的例子一样。上面这段代码转换成 CSS 为：

body {
background-color: red;
border-color: blue;
padding-top: px;
margin-top: px;
top: px;
}

在属性值中使用

在属性值中使用插值应该算是比较常用的，插值使你在属性值中不仅可以插入值，还可以插入表达式来计算。除此之外我们在前面的运算章节中，不知道你是否还记得，我们对两个变量使用 / 标识符的时候，如果你不想对这两个变量进行除法运算而是进行分隔，那么就可以使用插值避免运算。

可以说插值在属性值中的应用很广泛也很实用，我们来举例看下：

$one: px;
$two: ;
$family: "UaTy";
div {
margin: $one / $two; // 除法运算
margin: #{$one} / #{$two}; // 分隔
font-family: "MyFo #{$family}"; // 带引号的字符串会转换为不带引号
width: calc( - $one * *$two); // calc函数中内容会被当作字符串处理
width: calc( - #{$one * *$two}); // calc函数中插值的内容会进行运算
}
上面的代码中我对每一行都进行了标注，你要仔细看下，在属性值中你可以用这些方式来使用插值，上面的代码将会被转换为如下的 CSS 代码：

div {
margin: px;
margin: px/;
font-family: "MyFo UaTy";
background-image: url(http://xxx.xxx.xxx/a.jpg);
width: calc( - $one * *$two);
width: calc( - px);
}
在属性值中应用插值的场景还蛮多的，你可以这么来使用以提高你的开发效率～

在注释中使用

在 Sass 中的注释里也是可以使用插值的，而且如果插值中的内容是一段表达式，将会返回表达式的结果，举个例子来看下：

/* 在注释中使用插值:
* 2 + 2 = #{2 + 2} */
/* #{9 + 8 * 2} */
我们可以在注释中可以这么使用插值，具体什么时候需要使用看你的需求，你需要知道插值的这种使用方式，上面的代码将会被转换为如下的 CSS 代码：

/* 在注释中使用插值:
* 2 + 2 = 4 */
/* 25 */

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!