2

I wrote a SASS mixin, and included it in another partial file. For some strange reason it isn't including the code block in the compiled CSS. I can dump the calculations using @debug, and they are correct. Why is it not writing to my CSS file? Other rules declared in the same place as the mixin are being compiled, just not the mixin. Any pointers would help a lot. Here's the code:

@mixin px2rem($property, $px) {
  $property: $px;
  $property: ($px / $base-font-size) * 1rem;
  @debug inspect(($px / $base-font-size) * 1rem);
}

The debug property outputs the following:

_mixins.scss:4 DEBUG: 1.06667rem

Here is the selector that consumes it:

input, select {

    @include px2rem(font-size, 15px);
    @debug (16px / $base-font-size) * 1rem;
    @debug (15px / 16px) * 1rem;

    height: 2.5rem;
    line-height: 2.5rem;
    padding: 1rem;
    width: 70%;
    margin-bottom: 1rem;
    border-radius: 1px;
    border: #bcbebf 1px solid;
}

Compiled CSS:

.subscription input,
.subscription select{
  height:2.5rem;
  line-height:2.5rem;
  padding:1rem;
  width:70%;
  margin-bottom:1rem;
  border-radius:1px;
  border:1px solid #bcbebf
}

Output of debug statements:

_subscription.scss:9 DEBUG: 1.06667rem
_subscription.scss:10 DEBUG: 0.9375rem
Kraken
  • 5,043
  • 3
  • 25
  • 46

1 Answers1

2

Try to interpolate:

@mixin px2rem($property, $px) {
  #{$property}: $px;
  #{$property}: ($px / $base-font-size) * 1rem;
  @debug inspect(($px / $base-font-size) * 1rem);
}

Edit:

Because you want Sass to treat the variable property as a CSS property, you need to interpolate it.

Otherwise Sass will perform a variable assignment.

jacmoe
  • 1,637
  • 13
  • 17