search

MadLittleMods / postcss-css-variables

PostCSS plugin to transform CSS Custom Properties(CSS variables) syntax into a static representation
https://madlittlemods.github.io/postcss-css-variables/playground/
Other
536 stars 62 forks source link

It does not work with @media? #9

Closed nicothin closed 9 years ago

nicothin commented 9 years ago

before procesing:

:root {
  --screen-md: 768px;
  ...
}

@media (max-width: var(--screen-md)) {
  :root {
    ...
  }
}

after processing:

@media (max-width: var(--screen-md)) {
  ...
}

https://github.com/nicothin/test_area_PostCSS/tree/%40media_test — test

ai commented 9 years ago

BTW, it is a very Sassy way.

PostCSS way is to use CSS4 postcss-custom-media.

ai commented 9 years ago

@nicothin I think problem is that W3C spec is not allow to use CSS variables in at-rules. At least, I can’t find that example there.

nicothin commented 9 years ago

Well, this idiom with competent development is a pity that it can not be used in the CSS-processing :(

ai commented 9 years ago

W3C specially created Custom Media Queries for this cases ;-). Your engineer thinking is just limited by Sass way. You ask for one-to-one solutions and don't see benefits of other ways (like Custom Media is more explicit way with better support, because you can store all media breaks in one file and quickly understand on what media your style will be changed).

MadLittleMods commented 9 years ago

I can't find any example/support for var usage in media queries in the spec. Keep in mind that this plugin covers CSS custom properties.

@ai's suggestion of Custom media queries, postcss-custom-media seems like a good option for your use case.