在Vue+Sass实现动态换肤一文中如何理解[data-theme="#{$theme-name}"] & { }

Question

在混入方法
@mixin themeify {}存在[data-theme="#{$theme-name}"] & { }这样一行代码，在查阅scss相关资料后，发现&一般指代父选择器，然而该混入中的&不存在父选择器，其次，我在scss中也没有找到关于[data-theme="#{$theme-name}"]写法的相关资料，这行代码让我在解析动态换肤整体流程是产生了很大的困扰，希望您有空的时候能不吝赐教。

Answer 1

这个其实很好理解

1. [ ]就是css的属性选择器，选择有某个属性的元素，这个就是选择有data-theme属性的元素
2. $是sass的变量标识符，例如 $mycolor = "#fff" ,就是定义了一个变量mycolor = ‘#fff’，然后可以使用：
   p{
   color: $mycolor
   }
   等同于
   p{
   color: '#fff'
   }
3. ${}是sass的插值表达式，就是把这个变量插入进去了，就和拼接字符串差不多
   所以[data-theme="#{$theme-name}"]的意思就是选择有data-theme属性，并且属性值等于后面这个变量的元素

如有帮助，望采纳 ^.^ 谢谢啦~
参考文章：
https://blog.csdn.net/weixin_44198965/article/details/101162228
https://www.w3school.com.cn/css/css_selector_attribute.asp
https://www.runoob.com/sass/sass-variables.html