diff options
| author | ruki <waruqi@gmail.com> | 2018-11-08 00:38:48 +0800 |
|---|---|---|
| committer | ruki <waruqi@gmail.com> | 2018-11-07 21:53:09 +0800 |
| commit | 26105034da4fcce7ac883c899d781f016559310d (patch) | |
| tree | c459a5dc4e3aa0972d9919033ece511ce76dd129 /node_modules/postcss-modules-values/README.md | |
| parent | 2c77f00f1a7ecb6c8192f9c16d3b2001b254a107 (diff) | |
| download | xmake-docs-26105034da4fcce7ac883c899d781f016559310d.tar.gz xmake-docs-26105034da4fcce7ac883c899d781f016559310d.zip | |
switch to vuepress
Diffstat (limited to 'node_modules/postcss-modules-values/README.md')
| -rw-r--r-- | node_modules/postcss-modules-values/README.md | 77 |
1 files changed, 77 insertions, 0 deletions
diff --git a/node_modules/postcss-modules-values/README.md b/node_modules/postcss-modules-values/README.md new file mode 100644 index 00000000..2bd68604 --- /dev/null +++ b/node_modules/postcss-modules-values/README.md @@ -0,0 +1,77 @@ +# CSS Modules: Values + +Pass arbitrary values between your module files + +### Usage + +```css +/* colors.css */ +@value primary: #BF4040; +@value secondary: #1F4F7F; + +.text-primary { + color: primary; +} + +.text-secondary { + color: secondary; +} +``` + +```css +/* breakpoints.css */ +@value small: (max-width: 599px); +@value medium: (min-width: 600px) and (max-width: 959px); +@value large: (min-width: 960px); +``` + +```css +/* my-component.css */ +/* alias paths for other values or composition */ +@value colors: "./colors.css"; +/* import multiple from a single file */ +@value primary, secondary from colors; +/* make local aliases to imported values */ +@value small as bp-small, large as bp-large from "./breakpoints.css"; + +.header { + composes: text-primary from colors; + box-shadow: 0 0 10px secondary; +} + +@media bp-small { + .header { + box-shadow: 0 0 4px secondary; + } +} +@media bp-large { + .header { + box-shadow: 0 0 20px secondary; + } +} +``` + +**If you are using Sass** along with this PostCSS plugin, do not use the colon `:` in your `@value` definitions. It will cause Sass to crash. + +Note also you can _import_ multiple values at once but can only _define_ one value per line. + +```css +@value a: b, c: d; /* defines a as "b, c: d" */ +``` + +### Justification + +See [this PR](https://github.com/css-modules/css-modules-loader-core/pull/28) for more background + +## License + +ISC + +## With thanks + +- Mark Dalgleish +- Tobias Koppers +- Josh Johnston + +--- +Glen Maddern, 2015. |
