質問: * 内容更新しました。 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にする方法はありますでしょうか?
回答: 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 となっています。 ``` .box { padding: 16px; } @media screen and (min-width: 480px) { .box { padding: 48px; } } ``` そのため、質問者さんが実際に記述しているコードに、何か別の問題が存在する可能性があります。 参考: Sass: Variables - Shadowing