集成Sass

sass介绍

Sass 是一种 CSS 的预编译语言。它提供了 变量（variables）、嵌套（nested rules）、 混合（mixins）、 函数（functions）等功能，并且完全兼容 CSS 语法。Sass 能够帮助复杂的样式表更有条理， 并且易于在项目内部或跨项目共享设计。

安装

pnpm install sass sass-loader

但是你会发现在src/styles/index.scss全局样式文件中没有办法使用变量 ，因此需要给项目中引入全局变量。在style/variable.scss创建一个variable.scss文件！里面存放全局变量，然后在vite.config.ts中配置如下：

export default defineConfig((config) => {
css: {
preprocessorOptions: {
scss: {
javascriptEnabled: true,
additionalData: '@import "./src/styles/variable.scss";',
},
},
},
}
}

配置完毕你会发现scss提供这些全局变量可以在组件样式中使用了。

sass语法

变量　

在sass中我们可以把反复使用的css属性定义成变量，然后通过变量名去引用他们，从而不用重复书写这个属性值，使用$符号定义变量。在sass变量名中的中划线和下划线是等同的，不做区分

$highlight-border: 1px solid red;

普通嵌套

sass提供了一种嵌套式写法，只需写一次且可读性更高

 div{
h1{
color:$red;
}
}

伪类选择器

当我们使用到伪类选择器的时候

article a {
color: blue;
:hover { color: red }
}

这时候sass就提供了&给我们使用，&代表的是我们父类的选择器，这里的&代表的就是article a，我们可以把sass代码写成这样

article a {
color: blue;
&:hover { color: red }
}