vue3第三十节（vue3 vite中使用sass）

引言：什么是Sass?

Sass（Syntactically Awesome Style Sheets）是一种CSS预处理器，它扩展了CSS的功能，提供了更高级的语法和特性，例如变量、嵌套、混合、继承和颜色功能等，这些特性可以帮助开发者更高效地管理和维护样式表。Sass语法是基于缩进（缩进花括号）的，它与传统的CSS语法类似，但添加了一些额外的规则和语法结构。Sass代码需要编译成CSS代码才能在浏览器中呈现。

Sass 有什么好处呢？

Sass让编写可维护的CSS更加简易方便。可以用更少的代码，做更多的事，用更少的时间，具有更强的可读性比如全局定义的样式，变量，可以统一修改，避免重复书写样式

一、安装Sass

使用vite 创建好 vue 项目 vite 项目中只需要安装 sass 即可 ，不像 webpack项目需要安装 node-sass sass-loader; 执行如下命令 npm i sass --save-dev

二、使用Sass

安装完成后便可以在项目中使用Sass，

需要在style标签中设置lang属性为scss

如：

xml 复制代码

<style scoped lang="scss">
    .container{
        width: 100%;
        height: auto;
    }
</style>

三、配置Sass全局共享变量

1.配置全局 Sass中我们可以自定义变量，一些变量往往是全局共享的，为了方便我们可以在vite.config.js中defineConfig里面添加配置如下：

自定义全局样式文件：varibles.scss

css 复制代码

 css: {
    // css预处理器
    preprocessorOptions: {
      scss: {
        // 引入 varibles.scss 这样就可以在全局中使用 varibles.scss中预定义的变量了
        // 给导入的路径最后加上 ; 
        additionalData: '@import "@/assets/style/varibles.scss";'
      }
    }
  }

@import "@/assets/style/varibles.scss" 为自己定义的全局css 样式如下： 1、定义的全局变量

css 复制代码

:root {
    --GBrand: #0084FF;
    --GBrandHover: #1F93FF;
     --GBaseL1: #28374F;
    // ...
}

也可以直接使用 $ 符号定义变量 如：

bash 复制代码

$barndColor: #0084FF;
$waringColor:#FF9200;

// 全局mixin

css 复制代码

@mixin box-shadow($bulr: 20px, $color: #AAB1BD) {
    -webkit-box-shadow: 0px 0px $bulr $color;
    -moz-box-shadow: 0px 0px $bulr $color;
    box-shadow: 0px 0px $bulr $color;
}

不同的定义方式，最好是分开文件声明，不要混淆在一个文件中，便于后期维护

使用方法：

xml 复制代码

<style scoped lang="scss">
    .main-container{
        color: var(--GBrand);
        background--color: $barndColor;
        &-title{
            /* sass 嵌套样式 */
            color: var(--GBaseL1);
        }
    }
</style>

// 编译后为 data-v-xxxx 为 vue 中样式表自动生成的hash 值

css 复制代码

.main-container [data-v-xxxx]{
    color: #0084FF;
    background-color: ##0084FF;
}
.main-container .main-container-title[data-v-xxxx]{
    color: #28374F;
}

2.不配置全局，单独引入

在单个使用文件中引入

xml 复制代码

<style scoped lang="scss">
    @import '@/assets/style/varibles.scss'
</style>

3、数学计算 Sass允许使用数学表达式！这对于混合宏非常有用，是我们能够使用自己的标记做一些很酷的事情。

支持的操作符有：

加：+ 减：- 除：/ 乘：* 取余：% 相等：== 不相等：!=

两个Sass有关于数学计算的"陷阱" /符号用来简写CSS字体属性，比如font: 12px/18px，所以如果你想在非变量值上使用除法操作符，那么你需要使用括号包裹它们：

bash 复制代码

$fontSizeDiff: (14px/16px);

不能混合使用值的单位

css 复制代码

$container-width: 100% - 20px;

基于基础的容器宽度创建一个动态列

css 复制代码

$container-width: 100%;
.container {
  width: $container-width;
}
.col-4 {
  width: $container-width / 4;
}

// 编译后是这样的

arduino 复制代码

//  .container {
//   width: 100%;
//  }
//
//  .col-4 {
//      width: 25%;
//  }

以上仅代表个人观点，若有错误之处，欢迎批评指正