search

rodneyrehm / viewport-units-buggyfill

Making viewport units (vh|vw|vmin|vmax) work properly in Mobile Safari.
MIT License
1.59k stars 151 forks source link

This doesn't seem to work with sass variables #65

Closed cywtf closed 8 years ago

cywtf commented 8 years ago

Do we necessarily have to include here the final value? I am notifying that the bugyfill doesn't work with sass variables.

Something like: 

  margin-top: $header-height-small;
  width: $content-width-small;
  max-width: $content-width-small;
  height: $content-height-small;
  /* Viewport-units-buggyfill.js */
   content: 'viewport-units-buggyfill; margin-top: $header-height-small; width: $content-width-small; max-width: $content-width-small; height: $content-height-small;';

Is it possible to include sass variables in this bugyfill?

rodneyrehm commented 8 years ago

What you're looking for is called interpolation:

  margin-top: $header-height-small;
  width: $content-width-small;
  max-width: $content-width-small;
  height: $content-height-small;
  /* Viewport-units-buggyfill.js */
   content: 'viewport-units-buggyfill; margin-top: #{$header-height-small}; width: #{$content-width-small}; max-width: #{$content-width-small}; height: #{$content-height-small};';

This has got nothing to do with the buggyfill. Interpolation is a Sass thing.