@qingui/var

一个基础的 scss 变量库（包含重置样式），支持 vue2.x,3.x，和所有现代库。(全部变量在文末)

快速上手

安装

$ npm install @qingui/var -S

vue 项目使用

├─ src
│ └─ styles
└─ └─ var.scss // 全局变量

\var.scss

@import '../../node_modules/@qingui/var/index.scss';

// 可以覆盖变量值，如果不写默认执行@qingui/var里的变量，全部变量在文末
$primary-color: red;
$success-color: green;

按需使用

<template>
  <div class="demo">示例</div>
</template>

<style lang="scss" scoped>
@import '../styles/var.scss'; // 这里需注意路径引入

.demo {
  color: $primary-color;
}
</style>

全局调用(vite.config.js)

vue.cli 需在 vue.config.js 中配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./src/styles/var.scss";`,
      },
    },
  },
})

全部变量

// Colors
$primary-color: #409eff !default;
$success-color: #67c23a !default;
$info-color: #909399 !default;
$warning-color: #e6a23c !default;
$danger-color: #f56c6c !default;
$normal-color: #d9d9d9 !default;
$white: #fff !default;
$black: #000 !default;

// Base
$body-background: #fff !default;
$component-background: #fff !default;
$font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
  '微软雅黑', Arial, sans-serif !default;
$code-family: Consolas, Menlo, Courier, monospace !default;
$title-color: #17233d !default;
$text-color: #515a6e !default;
$text-color-secondary: fade($black, 45%) !default;
$font-size-base: 14px !default;
$font-size-sm: 12px !default;
$font-size-lg: $font-size-base + 2px !default;
$border-radius-base: 6px !default;
$border-radius-small: 4px !default;
$cursor-disabled: not-allowed !default;

// vertical margins
$margin-lg: 24px !default; // containers
$margin-md: 16px !default; // small containers and buttons
$margin-sm: 12px !default; // Form controls and items
$margin-xs: 8px !default; // small items

// vertical paddings
$padding-lg: 24px !default; // containers
$padding-md: 16px !default; // small containers and buttons
$padding-sm: 12px !default; // Form controls and items
$padding-xs: 8px !default; // small items

// Border color
$border-color-base: #dcdee2 !default; // outside
$border-color-split: #e8eaec !default; // inside
$border-width-base: 1px !default; // width of the border for a component
$border-style-base: solid !default; // style of a components border

// Shadow
$shadow-color: rgba(0, 0, 0, 0.2) !default;
$shadow-card: 0 1px 1px 0 rgba(0, 0, 0, 0.1) !default;
$shadow-up: 0 -1px 6px $shadow-color !default;
$shadow-down: 0 1px 6px $shadow-color !default;
$shadow-left: -1px 0 6px $shadow-color !default;
$shadow-right: 1px 0 6px $shadow-color !default;
$shadow-base: $shadow-down !default;

联系或提议题

[email protected]