Package Exports

@xiaoyimi/css-variables
@xiaoyimi/css-variables/dist/index.es.js
@xiaoyimi/css-variables/dist/index.umd.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

Browser Way (UMD)

<style>
/** in Other Xss File， 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);
}

</style>

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

    /** Default Css Variables  */
    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 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' },
    };
</script>

ES Module Way (ESM)

import {
  RegisterCssVariables,
  DefineReactiveCssVariables,
} from 'css-variables';

/** Default Css Variables  */
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 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' },
};