scss变量怎么写在template里面

在SCSS（Sassy CSS）中，通常变量是在`.scss`文件中声明的，然后可以在整个项目中引用。如果你想在HTML模板（如.pug或.vue文件中的`template`部分）中直接使用SCSS变量，需要将变量通过预处理器先转换为CSS，然后再插入到模板中。

如果你正在使用像Webpack这样的构建工具，你可以配置一个SCSS loader来编译SCSS并在运行时注入变量。一种常见的做法是使用JavaScript或TypeScript来动态生成CSS字符串，包含变量值，然后将其插入到`style`标签内：

// JavaScript 或 TypeScript 示例
const myColor = 'red'; // SCSS变量
const css = `
  .myClass {
    color: ${myColor}; /* 这里会把myColor的值替换为实际颜色 */
  }
`;

// 然后在模板中插入生成的CSS
document.head.insertAdjacentHTML('beforeend', `<style>${css}</style>`);

另一种方法是在组件的样式部分直接导入并使用变量，如果你使用的是一种支持CSS Modules的技术（如Vue CLI），那么在`.vue`文件中，你可以这样做：

<!-- user.vue -->
<template>
  <div :style="{ color: '$myColor' }">...</div>
</template>

<script setup>
import { ref } from 'vue';
import styles from './styles.scss';

const myColor = ref(styles.myColor);
</script>

<style scoped>
/* styles.scss */
$myColor: red; /* SCSS变量 */
.myClass {
  color: $myColor;
}
</style>