.main-#{$theme-name} scss(sass)选择器变量使用

今天在升级项目，从vue2升级到vue3的时候，我们项目的css预处理器也需要从 scss 升级到 less，然后项目中有一串代码我就没看明白，举例就是 .main-#{$theme-name} 这种类型

后面自己实验，原来这个就是 选择器的字符串拼接吧，看下面代码及结果

vue组件：

<template>
<div>
	<div  class="main">
		<div class="color">
			看看颜色
		</div>
		<div class="num">
			数字的背景色
		</div>
	</div>
	<div  class="main-default">
		<div class="color">
			看看颜色main-default
		</div>
		<div class="num">
			数字的背景色main-default
		</div>
	</div>
</div>
</template>

<script>
export default {
name:'',
}

</script>

<style lang="scss" scoped>
@import '../styles/one.scss'
</style>

两个 scss 文件，我放在了 style 目录下

// styles 下的 one.scss
$theme-name: default;


@import "./two.scss"

// styles 下的 two.scss

.main-#{$theme-name}{
	background-color: pink;
	.num{
		height: 50px;
		background-color: yellow;
	}
}

这个是界面结果：