Pass arbitrary values between your module files
/* colors.css */ @value primary: #BF4040; @value secondary: #1F4F7F; .text-primary { color: primary; } .text-secondary { color: secondary; }
/* breakpoints.css */ @value small: (max-width: 599px); @value medium: (min-width: 600px) and (max-width: 959px); @value large: (min-width: 960px);
/* 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.
@value a: b, c: d; /* defines a as "b, c: d" */
ISC
Glen Maddern, 2015.