基于sass的前端样式管理方案
前端样式管理方案
0.思维导图
1.文件结构
├── src # 源代码 │ ├── assets # 主题 字体等静态资源 │ ├── style # 样式文件 │ │── variable.scss # 全局变量 │ │── mixins.scss # 全局 Mixins │ │── global.scss # 全局样式 │ │── show-modal.scss # 对话框样式 │ │── list.scss # 列表样式 │ │── form.scss # 表单样式 │ │── detail.scss # 详细页面样式 │ ├── icons # 图标文件 │ ├── images # 图片文件
2.配置
## vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
export default defineConfig({
// 文件夹别名 @ 为src目录
resolve: {
alias: {
'@': resolve(__dirname, 'src')
}
},
// 将全局样式文件全局注入到项目
css: {
//css预处理
preprocessorOptions: {
scss: {
additionalData: '@import "@/assets/style/variable1.scss";
@import "@/assets/style/variable12.scss";',
},
},
},
});
3.实现方法
3.1全局变量
## variable.scss /* 定义全局变量与值 */ $bgcolor: lightblue; $textcolor: darkblue; $fontsize: 18px;
## xxx.vue
/* 使用变量 */
body {
background-color: $bgcolor;
color: $textcolor;
font-size: $fontsize;
}
3.2嵌套规则与属性
避免重复输入父选择器，可以有效的提高开发效率，减少样式覆盖可能造成的异常问题；
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
font: {
family: Helvetica, sans-serif;
size: 18px;
weight: bold;
}
text: {
align: center;
transform: lowercase;
overflow: hidden;
}
3.3文件导入
@import是一个比较简易的模块系统。scss拓展了@import 的功能，允许导入 scss或 sass文件。被导入文件将合并编译到同一个 css文件中，其中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用；
@import导入局部模块化样式（类似功能、同一组件）
## reset.scss
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
## standard.scss
@import "reset";
body {
font-family: Helvetica, sans-serif;
font-size**: 18px;
color: red;
}
## Css
html, body, ul, ol {
margin: 0;
padding: 0;
}
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
3.4@mixin 与 @include
mixin是可以重复使用的一组css声明，有助于减少重复代码，只需声明一次，就可在文件中引用；
混合指令可以包含所有的 css规则，绝大部分scss规则，可以传递参数，用参数建议加上默认值，输出多样化的样式；
定义可重复使用的样式
## mixins.scss
@mixin center {
display:flex;
justify-content:center;
align-items:center;
}
@mixin important-text {
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
}
@mixin bordered($color: blue, $width: 1px) {
border: $width solid $color;
}
## xxx.vue
@import "@/assets/style/mixins.scss";
.danger {
@include center;
@include important-text;
background-color: green;
}
.myArticle {
@include bordered(blue); // 调用混入，并传递参数
}
3.5.@extend 与 继承
.button-basic {
border: none;
padding: 15px 30px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.button-report {
@extend .button-basic;
background-color: red;
}
4.ui组件库选型
选型需求：支持sass，适配 Vue 3和TypeScript
4.1Element+
官方网站
A Vue 3 UI Framework | Element Plus
特点
-
一致 Consistency 与现实生活一致： 与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
在界面中一致： 所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
-
反馈 Feedback 控制反馈： 通过界面样式和交互动效让用户可以清晰的感知自己的操作；
页面反馈： 操作后，通过页面元素的变化清晰地展现当前状态。
-
效率 Efficiency 简化流程： 设计简洁直观的操作流程；
清晰明确： 语言表达清晰且表意明确，让用户快速理解进而作出决策；
帮助用户识别： 界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
-
可控 Controllability 用户决策： 根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
结果可控： 用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
调整主题变量
通过 SCSS 变量#
theme-chalk 使用SCSS编写而成。 你可以在 packages/theme-chalk/src/common/var.scss 文件中查找SCSS变量。
如何覆盖它？#
如果您的项目也使用了 SCSS，可以直接修改 Element Plus 的样式变量。 新建一个样式文件，例如 styles/element/index.scss：
4.2Naive UI
官方网站
Naive UI
特点
-
比较完整 有超过 80 个组件，希望能帮你少写点代码。
顺便一提，它们全都可以 treeshaking。
-
主题可调 我们提供了一个使用 TypeScript 构建的先进的类型安全主题系统。你只需要提供一个样式覆盖的对象，剩下的都交给我们。
顺便一提，不用 less、sass、css 变量，也不用 webpack 的 loaders。以及你可以试试右下角的主题编辑器。
-
使用 TypeScript Naive UI 全量使用 TypeScript 编写，和你的 TypeScript 项目无缝衔接。
顺便一提，你不需要导入任何 CSS 就能让组件正常工作。
-
快 我尽力让它不要太慢。至少 select、tree、transfer、table、cascader 都可以用虚拟列表。
调整主题变量
你不需要写任何 CSS（Scss、Less...）。
配置的全局主题变量会对后代组件生效的主题变量覆盖。
通过设定 n-config-provider 的 theme-overrides 来调整主题变量。naive-ui 导出了 GlobalThemeOverrides 类型帮助你定义主题。
具体可使用变量请参考 GlobalThemeOverrides 类型提示。
如果想要查看更多的主题变量，可在 Naive UI 主页的右下角的 edit 按钮查看。
可以修改对应的主题变量，导出后可以拿到 themeOverrides 对象。
5.问题
scss易用性较差，node-sass的依赖在使用和安装容易出现问题，nodejs换版本可能需要重新安装版本
相关参考：
解决vue中使用scss时，依赖node-sass和sass-loader的版本问题
解决sass-loader和node-sass版本冲突问题
解决Vue中安装sass-loader和node-sass版本匹配的报错
解决npm install安装node-sass包容易失败的问题 (Error: Cannot find module ‘node-sass‘)