vue3中安装并使用CSS预处理器Sass的方法介绍

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

1. 安装sass

以前用vue-cli的时候,还要安装sass-loader、node-sass什么的,安装的时候还会遇到各种问题,但是vite其实安装sass就可以了,很简单

复制代码
npm install sass -D

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引入并使用

复制代码
//全局引入
css: {
    preprocessorOptions: {
      scss: {
        /**如果引入多个文件,可以使用
       * '@import "@/assets/scss/globalVariable1.scss";
       * @import"@/assets/scss/globalVariable2.scss";'
      **/
        additionalData: '@import "@/style/globalVar.scss";',
      }
    }
  },

4.按需引入并使用

复制代码
<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;
}
相关推荐
我爱吃朱肉2 小时前
HTMLCSS模板实现水滴动画效果
前端·css·css3
全栈老李技术面试3 小时前
【高频考点精讲】async/await原理剖析:Generator和Promise的完美结合
前端·javascript·css·vue·html·react·面试题
我爱吃朱肉3 小时前
HTMLcss实现网站抽奖
css·html
土豆12505 小时前
构建高级半圆形进度条:SVG 与 纯 CSS 方案深度解析与完整代码
css·react.js·svg
土豆12505 小时前
Tailwind CSS 精通指南:提升效率、可维护性与最佳实践
前端·css
拖孩6 小时前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
kooboo china.7 小时前
Tailwind CSS 实战:基于 Kooboo 构建企业官网页面(一)
前端·css·编辑器
我爱吃朱肉11 小时前
纯HTMLCSS静态网站——元神
css·html
格子惊蛰版11 小时前
🪲正在开发后台管理系统的同学 UnoCSS 一定要用起来
前端·css
我怎么能这么帅气12 小时前
拯救排版焦虑!CSS省略号的终极指南:单行、多行、生效与失效场景全解析
前端·css