CODEWITHSUNDEEP
sassdrupal-7mixins
meez
meez

Reputation: 4759

Mixin (PXTOEM) provides error in CSS output

I use Drupal FortyTwo theme. The theme provides a mixin named PXTOEM:

//  PXTOEM
//  Calculate percentage with font-size as context
@function pxtoem($pixels...) {
  $result: '';

  @each $item in $pixels {
    $result: $result + ($item + 0) / $default-font-size + em + ' ';
  }

  @return #{$result};
}

In my scss file I use it like:

.header-menus {
  padding: pxtoem(0, $grid-gutter-width);
}

But after compiling it doesn't get the proper output?

padding: 0/pxem 0.75/pxem; (see screenshot)[![Screenshot][2]][2]

Upvotes: 0

Views: 41

Answers (1)

3rdthemagical
3rdthemagical

Reputation: 5350

Instead of + 0 you should add pixels: + 0px. And instead of + em use + 0em.
Sassmeister demo.
If you can not modify source code of the theme, create your own function.

$default-font-size: 16px;

//  PXTOEM
//  Calculate percentage with font-size as context
@function pxtoem($pixels...) {
  $result: '';

  @each $item in $pixels {
    $result: $result + ((($item + 0px) / $default-font-size) + 0em) + ' ';
  }

  @return #{$result};
}

.header-menus {
  padding: pxtoem(0, 30, 30px);
}

Css output: 

.header-menus {
  padding: 0em 1.875em 1.875em ;
}

Upvotes: 1

Related Questions