summaryrefslogtreecommitdiffstats
path: root/node_modules/postcss-modules-values/README.md
diff options
context:
space:
mode:
authorGravatar Piotr Russ <mail@pruss.it> 2020-11-16 00:10:28 +0100
committerGravatar Piotr Russ <mail@pruss.it> 2020-11-16 00:10:28 +0100
commite06ec920f7a5d784e674c4c4b4e6d1da3dc7391d (patch)
tree55713f725f77b44ebfec86e4eec3ce33e71458ca /node_modules/postcss-modules-values/README.md
downloadwebsite_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.md77
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.