Pass arbitrary values between your module files
```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" */
ISC
Glen Maddern, 2015.