插值怎么理解

来源:4-17 [Sass]插值#{}

rookie_r

2017-04-29 11:49

插值就是用来取变量的值的?比如:可以用插值来拼接css属性名,可以用插值来构造一个选择器,也就是拼接选择器名称,在@extend里面使用插值来拼接变量名。但是在@mixin里面是不能使用插值来拼接变量名的。这样理解对吗?

写回答 关注

2回答

  • 慕侠3044003
    2020-05-04 14:36:28

    理解:把变量值转化为字符串输出。有两个不能使用的场景

    1.在使用插值后,只能当初字符串的形式,不能再去调用另一个变量

    margin-top:$margin-#{$size}  //错误

    2.不能将输出的字符串去调用混入

    @include updated-#{flag}  //错误

    总之:插值生成的字符串可以当属性,也可以为字符串的属性值(比如图片路径),但是不能将生成的字符串去调用另一个变量或者去调用混入


  • 洋葱宝宝
    2017-04-30 23:03:16

    我感觉就是把变量的赋值转化为字符串输出,但是在@mixin和变量内部不能使用(以后的版本可能可以).

    $a: margin; //这里可以看到变量是不是有引号的字符串并不影响最终结果
    $b: 'padding';
    
    .box {
        #{$a}: 0 auto;
        #{$b}: 10px;
    }


Sass入门篇

Sass入门视频教程,学会Sass使你摆脱重复编写代码的工作

104420 学习 · 263 问题

查看课程

相似问题