如何在vite项目中安装并使用scss？

本文共计903个文字，预计阅读时间需要4分钟。

目录 + 1.scss 安装 2.scss 的基本使用（1）变量的定义（2）变量的简单使用

3.基本语法

（1）!default 的使用（2）变量的取值也可为变量（3）@mixin 的定义及使用

目录

• 1.scss安装
• 2.scss的简单使用
• (1)变量的定义
• （2）简单使用
• 3.基本语法
• （1）!default的使用
• （2）变量的取值也可以是变量
• （3）@mixin可以定义一段代码作为模板样式
• （4）&的使用
• （5）@extend的使用
• （6）%变量名的使用
• 总结

1.scss安装

（1）打开终端输入，

npm install sass -d

（2）在src/assets文件夹下新建 style文件夹(文件名可以自定义)，在文件夹下新建main.scss文件

（3）在vite.config.js中配置

export default defineConfig({ plugins: [vue()], css: { preprocessorOptions: { scss: { additionalData:'@import "./src/assets/style/main.scss";' } } } })

2.scss的简单使用

(1)变量的定义

例如：$blue: #3385ff

$表示这是一个变量；blue表示这个变量的名称；#3385ff代表这个变量的值

（2）简单使用

在HelloWorld.vue文件的style区

<style lang='scss'> body{ background-color: $blue } </style>

如果页面背景变成了刚定义的颜色，说明scss使用成功

3.基本语法

变量除了可以定义在全局，也可以在单个页面中定义

（1）!default的使用

$color-green: #0f0; $color-green: #f55 !default;

这里这个变量的值，最终会显示为绿色，这是因为，!default的含义是，如果这个变量没有被赋值，那么就赋默认值，如果在其他地方被赋值，就取在其他地方被赋的值，可以理解为把这个默认值的优先级降到了最低，当没有其它地方赋值时候，才会选择默认值

（2）变量的取值也可以是变量

$hello: $color-green;

（3）@mixin可以定义一段代码作为模板样式

@mixin border-radius($radius: 5px, $borderRadius: 8px) { border: { radius: $radius; top: $borderRadius solid #ff0; bottom: $borderRadius solid #f00; left: $borderRadius solid #00f; right: $borderRadius solid #888; } }

上面的代码可以看出，@mixin定义的变量，可以传参数，并且可以使用es6给函数参数默认值的方式赋值，且有相同的前缀的属性例如border，font...,可以把前缀和后边的拆开来写

在引用@mixin时，如果不传值，就会取默认的5px,8px，如果传值就会按参数位置来取值，例如下面的代码，取值就是5px,1px

@include border-radius(5px, 1px);

（4）&的使用

&可以引用父元素

.inner { width: 10px; height: 10px; background-color: $blue; } $hover: #333; &:hover { background-color: $hover; } //其实就是 .inner { width: 10px; height: 10px; background-color: $blue; } $hover: #333; .inner:hover { background-color: $hover; }

（5）@extend的使用

@extend可以继承其它代码段

@mixin btn($width: 50px, $height: 20px, $font-size: 16px) { width: $width; height: $height; font-size: $font-size; text-align: center; line-height: $height; @include border-radius(5px, 1px); &:hover { opacity: 0.8; cursor: pointer; } } .btn { @include btn(80px, 30px, 12px); margin: { top: 10px; } } .btn-primary { @extend .btn; background-color: $light-blue; color: $fontColor; }

这样.btn-primary就继承了.btn的所有属性，后边再写自己的特性

（6）%变量名的使用

%pd { padding-top: 100px; }

在引用时

@extend %pd;

但是如果%pd没有被引用，就不会产生代码，只有被引用后才会产生代码

总结

到此这篇关于如何在vite初始化项目中安装scss以及scss使用的文章就介绍到这了,更多相关vite初始化项目安装scss内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！