【scss】 変数を使ったcalc計算がうまく動かない

Question

やりたいこと

フォントサイズの計算を自動化したい。
PCの時：font-size: 26px;
SPの時：26:640(PCのデザイン幅)=x:480(SPのデザイン幅)
=>ディスプレイ幅が480pxの時、font-size:19.5pxになる。
※単位は全てpxです。

ベタがきで、
font-size:26 * 480px / 640とかくと
=>font-size:19.5pxと出力することができる。

しかし、これを@mixinで記述したい。

@mixin size($px) {
  font-size: #{$px}px;
  @include mq(sp) {
    font-size: calc(#{$px} * 480px) / 640;
    //=>動いていない。下記「試したこと」のセクションに試したことを記載。
  }
}

.fz26 {
  @include size(26);
//=>本当はfont-size:19.5pxと出力させたいが、そのままの形で出力されてしまう。
}

たくさんclass名を指定する必要があるので@mixinでまとめないと不便。
.fz24{@include size(24);}
.fz15{@include size(15);}
....

試したこと(全てそのまま出力されてしまう)

font-size: calc(#{$px} * 480) / 640;
font-size: calc(calc(#{$px} * 480px) /640);
font-size: calc(#{$px} * 480px / 640);
font-size: calc(#{$px} * 480 / 640px);
//=>どの記述でもこのまま出力される

参考にしたサイト
https://qiita.com/mtmtkzm/items/2e3aef1b504ebcde5311
https://hyper-text.org/archives/2016/05/css_calc_function.shtml

答えをいただければとても助かります。
すみませんが、よろしくお願いします。

追記：
上記で記載しておりませんでしたが、
文中に出てくる@mq(sp)は、こちらの内容になります。

$breakpoints: (
  'pc': 'screen and (min-width: 640px)',//pc
  'sp': 'screen and (max-width: 639px)',//sp
) !default;
@mixin mq($breakpoint: pc) {
  @media #{map-get($breakpoints, $breakpoint)} {
    @content;
  }
}

Answer 1

@include mq(sp) が機能していないです。

Comments

[kitty]

ご確認ありがとうございます。そちらの件について追記しました。ご確認お願い致します。

[yasutomi]

私の環境では普通にコンパイルされるので
kittyさんの環境上の問題のようです。

```css
.fz26 {
font-size: 26px;
}
@media screen and (max-width: 639px) {
.fz26 {
font-size: calc(26 * 480px)/640;
}
}
```

```
$ sass -v && compass -v
Sass 3.5.5 (Bleeding Edge)
Compass 1.0.3 (Polaris)
```

[kitty]

ご確認ありがとうございました。
yasutomiさんの環境では動いているということが分かりとても参考になりました。
ということは、
憶測ではありますが、gulpでコンパイルしているのでもしかしたらそれが原因かもしれません。
ステータスは一旦受付中のままで、原因を調べてまた報告いたします。