Package Exports

@xiaoyimi/css-variables
@xiaoyimi/css-variables/dist/index.cjs.js
@xiaoyimi/css-variables/dist/index.es.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@xiaoyimi/css-variables) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Css Variables

简单易用,不带任何插件依赖的CSS变量工具包.

Simple and easy-to-use CSS variable toolkit without any plugin dependencies.

使用方法（Usage）

安装依赖

npm install @xiaoyimi/css-variables

or

yarn add @xiaoyimi/css-variables

使用方式

/** in Other Css File or Style Node， You can set css variables； such as： */
.react {
  width: var(--box-width);
  height: var(--box-height);
  color: var(--box-color);
  background-color: var(--box-bg-color);
  padding: var(--box-padding);
}


/**=========  UMD: In Browser =========*/
<script src="../dist/index.umd.js"></script>
const { RegisterCssVariables, DefineReactiveCssVariables } = CssVariables; // Browser Global Variable

/**========= ESM: ES Module ==========*/
import * as CssVariables from '@xiaoyimi/css-variables'

/**========= CJS: Other Useage ===========*/
const CssVariables = require('xiaoyimi/css-variables')

/** Default Css Variables Config  */
const config = {
  box: {
    width: '100px',
    height: '100px',
    color: 'red',
    bg: { color: 'yellow' },
    padding: '10px',
  },
  // ... define css variables of other modules
};

/**
 * After registration,
 * you can make any modifications to the Css variable
 * during maintenance operations .
 * */
const { RegisterCssVariables, DefineReactiveCssVariables } = CssVariables;

const proxy = DefineReactiveCssVariables(config);
console.log(`register variables`);
RegisterCssVariables(proxy);

/** Set CSS variables separately */
console.log(`set a variable`);
proxy.box.bg.color = 'blue';

/** Set CSS variables together */
console.log(`set some variables`);
proxy.box = {
  color: 'white',
  bg: { color: 'black' },
};