在vite初始化的项目中安装scss，及scss的使用

1.scss安装

（1）打开终端输入

安装依赖 

npm install sass -d

（2）在src/assets文件夹下新建  style文件夹(文件名可以自定义)，在文件夹下新建main.scss文件

（3）在vite.config.js中配置 (当然你也可以scss文件创建在哪里 就往哪里引进来

比方说：additionalData: '@import "./src/style/index.scss";')

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData:'@import "./src/assets/style/main.scss";'
      }
    }
  }
})

2.scss的简单使用

 (1)变量的定义
                例如：$blue: #3385ff

                $表示这是一个变量；blue表示这个变量的名称；#3385ff代表这个变量的值

      （2）简单使用
                在HelloWorld.vue文件的style区

<style lang='scss'>
    body{
        background-color: $blue
    }
</style>  

如果页面背景变成了刚定义的颜色，说明scss使用成功(要注意自己类名是否定义正确 别慌乱的认为是自己配置错了)

3.基本语法

简单示例几个吧 实际开发中顶多是全局定义用得到变量  其实js中定义的变量css中也可以用

变量除了可以定义在全局，也可以在单个页面中定义 

（1）!default的使用       

$color-green: #0f0;
$color-green: #f55 !default;

这里这个变量的值，最终会显示为绿色，这是因为，!default的含义是，如果这个变量没有被赋值，那么就赋默认值，如果在其他地方被赋值，就取在其他地方被赋的值，可以理解为把这个默认值的优先级降到了最低，当没有其它地方赋值时候，才会选择默认值

（2）变量的取值也可以是变量

$hello: $color-green;

（3）@mixin可以定义一段代码作为模板样式

@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);

（4）&的使用  

  &可以引用父元素

.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;
  }

当然还有其他不少功能  最准确还是去查看官网吧~