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

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

新規登録して質問してみよう
ただいま回答率
85.48%
SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1210閲覧

dart-sassにおけるpxとvwの計算方法について

kss

総合スコア9

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2023/01/07 07:29

発生している問題・エラーメッセージ

sassにて、clamp関数を用いたFluidタイポグラフィを計算するmixinを作成しました。

scss

1@use 'sass:math'; 2 3@mixin clampFontSize($min-size, $max-size){ 4$min-viewport:375; 5$max-viewport:1440; 6 7$slope:math.div(($max-size - $min-size),($max-viewport - $min-viewport)); 8$intercept:$min-size - ($slope * $min-viewport); 9$fluid-size:#{$slope * 100vw}+#{math.div($max-size, 16)}; 10$clamp-size:clamp( 11 math.div($min-size, 16)*1rem, 12 $fluid-size, 13 math.div($max-size, 16)*1rem 14); 15font-size: $clamp-size; 16}

ところがブラウザ側では

font-size: clamp(0.9375rem, 1.220657277vw1.75, 1.75rem);

と表示されてしまい、適用はされませんでした。(実際には警告マークと横線が入っています。)
sassではvwとpxの計算が出来ないのかと思い、以下のようにvwとpxの値を別の変数に入れ、変数同士を計算するよう書きかえたところうまくスタイルが適用されました。

scss

1@mixin clampFontSize($min-size, $max-size){ 2... 3$fluid-size-vw:$slope * 100vw; 4$fluid-size-px:(math.div($intercept, 16)*1rem); 5$clamp-size:clamp( 6 math.div($min-size, 16)*1rem, 7 $fluid-size-vw + $fluid-size-px, 8 math.div($max-size, 16)*1rem 9); 10font-size: $clamp-size; 11}

無事スタイルは適用されたのですが、sassではpxとvwの計算は出来ないものなのでしょうか。CSS変数では最初の方法でうまくいったので、同じやり方でsassでも行おうとしたところできませんでした。
公式のドキュメントにもそれらしいところが見つからなかったのでこちらにて質問させていただきます。

初歩的な質問で大変恐縮ですが、お力を貸していただければ幸いです。

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

sassではpxとvwの計算は出来ないものなのでしょうか。

はい。pxは通常の長さの単位ですが、vwは「ビューの幅」というブラウザの状態に依存する単位なので、ブラウザでしか両者を合わせた演算はできません。

投稿2023/01/07 09:17

maisumakun

総合スコア145183

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問