Sass学习之路(9)——插值 #{}

最新推荐文章于 2024-05-23 09:17:16 发布

YuuyaRin

最新推荐文章于 2024-05-23 09:17:16 发布

阅读量1.9k

点赞数 1

分类专栏： Sass 夕夜大魔王的前端魔法卷轴文章标签：前端 CSS Sass 预编译编程

本文链接：https://blog.youkuaiyun.com/u013034014/article/details/53671234

版权

夕夜大魔王的前端魔法卷轴同时被 2 个专栏收录

24 篇文章

订阅专栏

Sass

15 篇文章

订阅专栏

本文介绍了Sass中插值的使用方法，包括如何利用插值动态生成CSS属性及选择器，通过具体示例展示了其简化CSS代码和提高规则化程度的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在Sass中，除了在设置属性的值的时候，我们可以使用变量或循环等方式赋值以外。属性的名称，选择器名称等，都可以使用一种叫插值的方式将字符串插入进来。下边我们来看一个例子：

$properties: (margin, padding);
@mixin set-value($side, $value) {
    @each $prop in $properties {
        #{$prop}-#{$side}: $value;
    }
}
.login-box {
    @include set-value(top, 14px);
}

$ properties可以看作JS中的数组，这里的混合宏中遍历了这个数组，并传入了一个代表方向的参数。将变量放在#{}中，便实现了类似字符串拼接的效果，最终编译结果如下：

.login-box {

  margin-top: 14px;

  padding-top: 14px; }

再来看一个用插值来构建选择器的栗子：

@mixin generate-sizes($class, $small, $medium, $big) {
    .#{$class}-small { font-size: $small; }
    .#{$class}-medium { font-size: $medium; }
    .#{$class}-big { font-size: $big; }
}
@include generate-sizes("header-text", 12px, 20px, 40px);

编译结果如下：

.header-text-small { font-size: 12px; }
.header-text-medium { font-size: 20px; }
.header-text-big { font-size: 40px; }

可以看出插值的使用对CSS代码的简化和规则化是挺有作用的，但是并不是处处可用哦。

这里总结一下我目前发现的插值不可用的情况：

1.插值不能用在属性的值中，也就是不能出现在冒号后边，否则会报错，无法识别。

2.不能用来调用混合宏，如@include updated-#{$flag} ，这里的插值同样不会被识别。（但是经过试验，@extend后边使用插值是可以的）。