質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.37%

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

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,828

score 15

やりたいこと

フォントサイズの計算を自動化したい。
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;
  }
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/07/28 16:08

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

    キャンセル

  • 2019/07/28 16:17

    私の環境では普通にコンパイルされるので
    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)
    ```

    キャンセル

  • 2019/07/29 19:40 編集

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る