diff options
author | 2020-11-16 00:10:28 +0100 | |
---|---|---|
committer | 2020-11-16 00:10:28 +0100 | |
commit | e06ec920f7a5d784e674c4c4b4e6d1da3dc7391d (patch) | |
tree | 55713f725f77b44ebfec86e4eec3ce33e71458ca /node_modules/postcss-modules-values/README.md | |
download | website_creator-e06ec920f7a5d784e674c4c4b4e6d1da3dc7391d.tar.gz website_creator-e06ec920f7a5d784e674c4c4b4e6d1da3dc7391d.tar.bz2 website_creator-e06ec920f7a5d784e674c4c4b4e6d1da3dc7391d.zip |
api, login, auth
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 0000000..2bd6860 --- /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. |