05 【Sass语法介绍-插值】

Sass语法介绍-插值

1.前言

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

2.什么是插值？

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

类似 es6 中的插值表达，插值几乎可以用在任何地方。

Sass的插值写法为：#{$variable_name}。

应用于以下的一些场景：

• 在选择器中使用
• 在属性名中使用
• 在属性值中使用
• 在注释中使用

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

3.在选择器中使用

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

$name: item;
.ul-#{$name} { // 使用插值
  width: 200px;
  .li-#{$name} { // 使用插值
    width: 100%;
  }
}
.box-#{$name} { // 使用插值
  height:100px;
  .#{$name} { // 使用插值
    height:100%;
  }
}

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

.ul-item {
   
  width: 200px;
}
.ul-item .li-item