Interpolation

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

国庆活动:订阅年付会员送 6 个月,重订、续订送 12 个月。订阅 →

Interpolation 可以让我们把一个值插入到另一个值的里面,在 Sass 里,Interpolation,可以用这样的形式,把变量或者,表达式放到一组带 # 的花括号里面(#{})。使用 Interpolation 这种语法,我们可以在样式的选择器或者属性的上面使用变量或者表达式。

我们先在一个字符串里面使用 Interpolation,这里先去定义一个变量 ... 叫做 $version .. 它的值可以是我们的项目的版本号 .. "0.0.1" ..

比如我们要在一个注释内容里面使用这个版本号 ... 可以这样 ... 先输入点注释内容 .. /* 项目当前的版本是: */ 在这里要加上 $version 这个变量表示的值 ... 先输入一个 #.. 再加上一组花括号 ... 在花括号里,输入 $version 这个变量 ...

/* 项目当前的版本是:#{$version} */

保存 ... 在输出的结果里,这段注释内容里面,会包含 $version 变量表示的值 ... 0.0.1 ...

下面,我们在 CSS 的选择器还有属性里面去试一下 Interpolation ... 比如这里我们有两个变量 ... 一个是 $name ... 它的值是选择器的名字 ... info ... 另外还有一个变量 .. 叫做 $attr ... 它的值是 CSS 属性的名字 ... border ..

另起一行,再去添加一段样式 ... .alert- 比如我们想在这里输出 $name 这个变量里的值 ... 如果直接使用这个变量的名字 ... $name .. 保存 ... Sass 会提示错误 ... 这里我们就可以使用 Interpolation 的形式 ... 在变量的周围加上一组花括号 .. 在这个花括号的前面,再加上一个 # 号 ...

同样在 CSS 属性名字里面使用变量或者表达式,也需要使用 Interpolation 的形式 .. #{$attr}-color: #ccc;

保存 ... 在输出的结果里面,你会发现,Sass 正确的输出了使用 Interpolation 形式的变量的值 ...

Interpolation《 Sass 基础 》

统计

11228
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点