source: trip-planner-front/node_modules/postcss-modules-values/README.md@ 76712b2

Last change on this file since 76712b2 was 6a3a178, checked in by Ema <ema_spirova@…>, 3 years ago

initial commit

  • Property mode set to 100644
File size: 1.4 KB
Line 
1# CSS Modules: Values
2
3Pass arbitrary values between your module files
4
5### Usage
6
7```css
8/* colors.css */
9@value primary: #BF4040;
10@value secondary: #1F4F7F;
11
12.text-primary {
13 color: primary;
14}
15
16.text-secondary {
17 color: secondary;
18}
19```
20
21```css
22/* breakpoints.css */
23@value small: (max-width: 599px);
24@value medium: (min-width: 600px) and (max-width: 959px);
25@value large: (min-width: 960px);
26```
27
28```css
29/* my-component.css */
30/* alias paths for other values or composition */
31@value colors: "./colors.css";
32/* import multiple from a single file */
33@value primary, secondary from colors;
34/* make local aliases to imported values */
35@value small as bp-small, large as bp-large from "./breakpoints.css";
36/* value as selector name */
37@value selectorValue: secondary-color;
38
39.selectorValue {
40 color: secondary;
41}
42
43.header {
44 composes: text-primary from colors;
45 box-shadow: 0 0 10px secondary;
46}
47
48@media bp-small {
49 .header {
50 box-shadow: 0 0 4px secondary;
51 }
52}
53@media bp-large {
54 .header {
55 box-shadow: 0 0 20px secondary;
56 }
57}
58```
59
60**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.
61
62Note also you can _import_ multiple values at once but can only _define_ one value per line.
63
64```css
65@value a: b, c: d; /* defines a as "b, c: d" */
66```
67
68## License
69
70ISC
71
72## With thanks
73
74- Mark Dalgleish
75- Tobias Koppers
76- Josh Johnston
77
78---
79
80Glen Maddern, 2015.
Note: See TracBrowser for help on using the repository browser.