You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
1.4 KiB
80 lines
1.4 KiB
# 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"; |
|
/* value as selector name */ |
|
@value selectorValue: secondary-color; |
|
|
|
.selectorValue { |
|
color: secondary; |
|
} |
|
|
|
.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" */ |
|
``` |
|
|
|
## License |
|
|
|
ISC |
|
|
|
## With thanks |
|
|
|
- Mark Dalgleish |
|
- Tobias Koppers |
|
- Josh Johnston |
|
|
|
--- |
|
|
|
Glen Maddern, 2015.
|
|
|