（1）打开终端输入，
npm install sass -d
（2）在src/assets文件夹下新建 style文件夹(文件名可以自定义)，在文件夹下新建main.scss文件
（3）在vite.config.js中配置
export default defineConfig({
plugins: [vue()],
css: {
preprocessorOptions: {
scss: {
additionalData:'@import "./src/assets/style/main.scss";'
}
}
}
})例如：$blue: #3385ff
$表示这是一个变量；blue表示这个变量的名称；#3385ff代表这个变量的值
在HelloWorld.vue文件的style区
<style lang='scss'>
body{
background-color: $blue
}
</style> 如果页面背景变成了刚定义的颜色，说明scss使用成功
变量除了可以定义在全局，也可以在单个页面中定义
$color-green: #0f0; $color-green: #f55 !default;
这里这个变量的值，最终会显示为绿色，这是因为，!default的含义是，如果这个变量没有被赋值，那么就赋默认值，如果在其他地方被赋值，就取在其他地方被赋的值，可以理解为把这个默认值的优先级降到了最低，当没有其它地方赋值时候，才会选择默认值
$hello: $color-green;
@mixin border-radius($radius: 5px, $borderRadius: 8px) {
border: {
radius: $radius;
top: $borderRadius solid #ff0;
bottom: $borderRadius solid #f00;
left: $borderRadius solid #00f;
right: $borderRadius solid #888;
}
}上面的代码可以看出，@mixin定义的变量，可以传参数，并且可以使用es6给函数参数默认值的方式赋值，且有相同的前缀的属性例如border，font...,可以把前缀和后边的拆开来写
在引用@mixin时，如果不传值，就会取默认的5px,8px，如果传值就会按参数位置来取值，例如下面的代码，取值就是5px,1px
@include border-radius(5px, 1px);
&可以引用父元素
.inner {
width: 10px;
height: 10px;
background-color: $blue;
}
$hover: #333;
&:hover {
background-color: $hover;
}
//其实就是
.inner {
width: 10px;
height: 10px;
background-color: $blue;
}
$hover: #333;
.inner:hover {
background-color: $hover;
}@extend可以继承其它代码段
@mixin btn($width: 50px, $height: 20px, $font-size: 16px) {
width: $width;
height: $height;
font-size: $font-size;
text-align: center;
line-height: $height;
@include border-radius(5px, 1px);
&:hover {
opacity: 0.8;
cursor: pointer;
}
}
.btn {
@include btn(80px, 30px, 12px);
margin: {
top: 10px;
}
}
.btn-primary {
@extend .btn;
background-color: $light-blue;
color: $fontColor;
}这样.btn-primary就继承了.btn的所有属性，后边再写自己的特性
%pd {
padding-top: 100px;
}在引用时
@extend %pd;
但是如果%pd没有被引用，就不会产生代码，只有被引用后才会产生代码
