Sass是什么？
Sass（Syntactically Awesome Style Sheets）是一种CSS预处理器，它扩展了CSS的功能，提供了更高级的语法和特性，例如变量、嵌套、混合、继承和颜色功能等，这些特性可以帮助开发者更高效地管理和维护样式表。Sass语法是基于缩进（缩进花括号）的，它与传统的CSS语法类似，但添加了一些额外的规则和语法结构。Sass代码需要编译成CSS代码才能在浏览器中呈现。
为什么使用Sass?
Sass让编写可维护的CSSS更加简易方便。可以用更少的代码，做更多的事，用更少的时间，具有更强的可读性。
安装sass
以前用vue-cli的时候，还要安装sass-loader、node-sass什么的，安装的时候还会遇到各种问题，但是vite其实安装sass就可以了，很简单。
1、安装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; }
sass语法
1、变量
Sass让CSS可以使用变量。变量类型可以是数字，字符串，颜色，null，列表和maps。在Sass中使用$符号定义变量。
创建一个变量
$primaryColor: #eeffcc;
定义变量并不会输出任何CSS，它们只会被记录在当前作用域的变量集中。
使用变量
body { background: $primaryColor; }
变量作用域
如果你在选择器中声明了一个变量，那么它的作用范围就是这个选择器内部。
$primaryColor: #eeccff; body { $primaryColor: #ccc; background: $primaryColor; //编译后#ccc } p { color: $primaryColor; //编译后#eeccff }
Sass提供了一个!global标识符，可以在选择器中声明一个全局变量。
$primaryColor: #eeccff; body { $primaryColor: #ccc !global; background: $primaryColor; //编译后#ccc } p { color: $primaryColor; //编译后#ccc }
2、数学计算
与CSS不同，Sass允许使用数学表达式！这对于混合宏非常有用，是我们能够使用自己的标记做一些很酷的事情。
支持的操作符包括：
加：+
减：-
除：/
乘：*
取余：%
相等：==
不相等：!=
两个Sass有关于数学计算的“陷阱”
- /符号用来简写CSS字体属性，比如font: 14px/16px，所以如果你想在非变量值上使用除法操作符，那么你需要使用括号包裹它们：
$fontDiff: (14px/16px);
- 不可以混合使用值的单位：
$container-width: 100% - 20px;
基于基础的容器宽度创建一个动态列
$container-width: 100%; .container { width: $container-width; } .col-4 { width: $container-width / 4; } // 编译后是这样的 // .container { // width: 100%; // } // // .col-4 { // width: 25%; // }
3、嵌套
Sass中一个很有用又经常被误用的特性，就是嵌套声明。
- CSS中，我们会这么写
.container { width: 100%; } .container h1 { color: red; }
- 在Sass中，我们这样写
.container { width: 100%; h1 { color: red; } }
- 可以通过使用&符号来引用父选择器给伪选择器添加链接属性
a.myAnchor { color: blue; &:hover { text-decoration: underline; } &:visited { color: purple; } }
4、Imports
imports允许将总的样式分割成小文件，并在另一个文件中导入。
- 我们可以使用@import指令导入.scss文件
@import "grids.scss";
- 也可以不需要写扩展名
@import "grids";
