关于scss管理样式总结

基于sass的前端样式管理

配置全局化样式

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";',
      },
    },
  },
});
复制代码

如何定义一个全局样式

在variable.scss文件中

$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 18px;
复制代码

在某组件中使用样式

body {
  background-color: $bgcolor;
  color: $textcolor;
  font-size: $fontsize;
}
复制代码

@import导入局部模块化样式

被导入文件将合并编译到同一个 css文件中，其中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用

• 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;
  }
  复制代码
  

  类似将reset.scss中的样式直接与standard中代码合并

通过@mixin 与 @include减少常用样式的重复

例如在mixins.scss文件中定义

@mixin center {
 display:flex;
 justify-content:center;
 align-items:center;
}
//定义可传参数的样式--通过传参改变样式数值
@mixin bordered($color: blue, $width: 1px) {
  border: $width solid $color;
}
复制代码

在vue组件中

@import "@/assets/style/mixins.scss";
.danger {
  @include center;
}
.myArticle {
  @include bordered(blue);  // 调用混入，并传递参数
}
复制代码

通过extend继承重复样式

.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
.button-report  {
  @extend .button-basic;
  background-color: red;
}
复制代码

使用SCSS直接修改 Element Plus 的样式变量

可以在此查找SCSS变量。

github.com/element-plu…

0. 创建一个styles/element/scss文件

   @forward 'element-plus/theme-chalk/src/common/var.scss' with (
     $colors: (
       'primary': (
         'base': green,
       ),
     ),
   );
   // 如果你想导入所有样式:
   // @use "element-plus/theme-chalk/src/index.scss" as *;
   复制代码
   

1. 在项目入口文件中，导入这个样式文件以替换 Element Plus 内置的 CSS

   注：在 element-plus scss 文件之前导入element/index.scss

2. 创建一个 element/index.scss 文件来合并你的变量和 element-plus 的变量

   import { createApp } from 'vue'
   import './styles/element/index.scss'
   import ElementPlus from 'element-plus'
   import App from './App.vue'
   ​
   const app = createApp(App)
   app.use(ElementPlus)
   复制代码
   

参考文章

blog.csdn.net/weixin_4901…