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.

77 lines
1.4 KiB

4 years ago
  1. # CSS Modules: Values
  2. Pass arbitrary values between your module files
  3. ### Usage
  4. ```css
  5. /* colors.css */
  6. @value primary: #BF4040;
  7. @value secondary: #1F4F7F;
  8. .text-primary {
  9. color: primary;
  10. }
  11. .text-secondary {
  12. color: secondary;
  13. }
  14. ```
  15. ```css
  16. /* breakpoints.css */
  17. @value small: (max-width: 599px);
  18. @value medium: (min-width: 600px) and (max-width: 959px);
  19. @value large: (min-width: 960px);
  20. ```
  21. ```css
  22. /* my-component.css */
  23. /* alias paths for other values or composition */
  24. @value colors: "./colors.css";
  25. /* import multiple from a single file */
  26. @value primary, secondary from colors;
  27. /* make local aliases to imported values */
  28. @value small as bp-small, large as bp-large from "./breakpoints.css";
  29. .header {
  30. composes: text-primary from colors;
  31. box-shadow: 0 0 10px secondary;
  32. }
  33. @media bp-small {
  34. .header {
  35. box-shadow: 0 0 4px secondary;
  36. }
  37. }
  38. @media bp-large {
  39. .header {
  40. box-shadow: 0 0 20px secondary;
  41. }
  42. }
  43. ```
  44. **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.
  45. Note also you can _import_ multiple values at once but can only _define_ one value per line.
  46. ```css
  47. @value a: b, c: d; /* defines a as "b, c: d" */
  48. ```
  49. ### Justification
  50. See [this PR](https://github.com/css-modules/css-modules-loader-core/pull/28) for more background
  51. ## License
  52. ISC
  53. ## With thanks
  54. - Mark Dalgleish
  55. - Tobias Koppers
  56. - Josh Johnston
  57. ---
  58. Glen Maddern, 2015.