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

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

新規登録して質問してみよう
ただいま回答率
85.50%
レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Sass

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

CSS

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

Q&A

解決済

1回答

2656閲覧

Scssでのレスポンシブ対応で、画面サイズに応じて変数を変更したい

masao1991

総合スコア15

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Sass

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

CSS

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

0グッド

1クリップ

投稿2019/05/02 13:31

編集2019/05/05 04:04
  • 内容更新しました。 2019/05/05
  • 更新前はメディアクエリ内にも .box{padding: ;} を書いていましたが、それは削除しました。
  • メディアクエリ内には変数のみ記述して、対応するプロパティに反映させたいイメージです。

Scssでメディアクエリ内で変数の上書きをしたいです。
たとえば、CSSカスタムプロパティなら実現できます。
16pxを48pxにします。
以下の通りです。

// OK // デフォルト root{ --space: 16px; } .box { padding: var(--space); } @media screen and (min-width:480px) { // 画面サイズ480px以上で48px root{ --space: 48px; } }

これをScssでやろうとすると、うまくいきません。

// NG // デフォルト $space: 16px; .box { padding: $space; } @media screen and (min-width:480px) { // 画面サイズ480px以上で48px $space: 48px; }

Scssで、この変数__"space"__を48pxにする方法はありますでしょうか?

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

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

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

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

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

guest

回答1

0

ベストアンサー

Sass のドキュメントによれば、質問文のソースコードでの space 変数は 48px になるはずです。

Local variables can even be declared with the same name as a global variable. If this happens, there are actually two different variables with the same name: one local and one global. This helps ensure that an author writing a local variable doesn’t accidentally change the value of a global variable they aren’t even aware of.

また、 SassMeister | The Sass Playground! で該当コードをコンパイルした結果は、以下のようになり、メディアクエリ内の padding プロパティの値は 48px となっています。

CSS

1.box { 2 padding: 16px; 3} 4 5@media screen and (min-width: 480px) { 6 .box { 7 padding: 48px; 8 } 9}

そのため、質問者さんが実際に記述しているコードに、何か別の問題が存在する可能性があります。


参考: Sass: Variables - Shadowing

投稿2019/05/05 00:44

s8_chu

総合スコア14731

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

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

masao1991

2019/05/05 03:54 編集

おっしゃる通りでした。改めて、プレーンな環境でテストしてみたところ、 問題なく適用されました。 ご回答いただいてから気づいたのですが、 質問の記述が若干間違っていました。質問内容を更新しました。 実際は、メディアクエリ内にはクラスは書かずに、変数のみ記述して、対応する全てのプロパティに適用する、というのをイメージしています。 これだと、カスタムプロパティは可能なのですが、Sassなどの変数だとできないのです。
s8_chu

2019/05/05 04:06

> メディアクエリ内にはクラスは書かずに、変数のみ記述して、対応する全てのプロパティに適用 それは Sass では不可能だと思います。 メディアクエリ内で CSS 変数を使うか、 `@mixin` にして CSS をまとめるなど、別の方法を検討すると良いと思います。
masao1991

2019/05/06 04:42

ありがとうございます。やはりそうですよね。 もやもやがすっきりしました。 ちょっと他の方法を検討してみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問