阅读数:80 评论数:0

一、概述

sass提供了变量、嵌套、混合、志入等高级功能，强化了css的功能，编写css更便捷，功能更强大。

1、scss文件命名（前下划线）

在 SCSS 文件命名约定中，文件名前的下划线（_）有特殊含义。当一个 SCSS 文件的名称以下划线开头时，它被称为“部分”（partial）。部分文件是一个包含可被其他 SCSS 文件导入的代码片段，但本身并不会被编译成 CSS 文件。

例如，你可能有一个名为 _variables.scss 的文件，它包含了整个项目中使用的颜色、字体大小和其他 CSS 变量。由于它是一个部分文件，它不会被编译成一个独立的 CSS 文件。相反，它可以被其他 SCSS 文件导入，并且这些变量可以在多个文件中使用。

当你在主 SCSS 文件（如 main.scss）中导入这些部分文件时，不需要包含文件名前的下划线和文件扩展名：

// main.scss

// 使用下划线和不使用.scss扩展名导入部分文件
@import 'helpers/variables';
@import 'helpers/mixins';
@import 'base/reset';
@import 'base/typography';
// ...

二、使用

1、安装sass

使用vite只需要安装sass就可以

npm install --save-dev sass

2、编写全局css变量/全局mixin

// 全局变量 / globalVar.scss
$font-size-normal: 32px;

$bg-color: #1989fa;

// 全局mixin / globalMixin.scss
@mixin box-shadow($bulr: 20px, $color: #1989fa7a) {
    -webkit-box-shadow: 0px 0px $bulr $color;
    -moz-box-shadow: 0px 0px $bulr $color;
    box-shadow: 0px 0px $bulr $color;
}

3、vite引入并使用

（1）全局引入 vite.config.js

css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@use "@/style/globalVar.scss" as *;',
      }
    }
  },

（2）按需引入

//按需引入并使用
<style scoped lang="scss">
@import "@/style/globalMixin.scss";
.test{
  width: 650px;
  height: 60px;
  font-size: $font-size-normal;
  background-color: $bg-color;
  @include box-shadow;
}
</style>