Sassで全体を書いたのち、レスポンシブを行おうとしています。
メインのsassフィルにて下記のように定義し、
main.sass
1//---------- media Query --------------// 2// デバイス定義 3$type: sp tb pc; 4// media-query.scssをインポート 5@import "media_query"; 6 7// スマホ 8//--------------------------------------- 9@media only screen and (max-width: 640px) { 10 $type: sp; 11 @import "media_query"; 12} 13 14// タブレット 15//--------------------------------------- 16@media only screen and (max-width: 980px) { 17 $type: tb; 18 @import "media_query"; 19} 20 21// PC 22//--------------------------------------- 23@media only screen and (max-width: 1200px) { 24 $type: pc; 25 @import "media_query"; 26}
cssには試しに以下のように記載してみます。
media_query.sass
1.topLogo { 2 @if $type == sp { 3 background-size: 100%; 4 } 5} 6 7.topLogo { 8 @if $type == tb { 9 background-size: 100%; 10 } 11}
かなりメジャーなやり方のようなので上手くいくかと思ったのですが、
コンパイルされたcssは以下になります。
main.css
1@media only screen and (max-width: 640px) { 2 .topLogo { 3 background-size: 100%; } }
@if $type == sp はきちんと書き出されたのですが、
@if $type == tb こちらは書き出されませんでした。。。
そしてなんと、main.scssの順番を変えてタブレットを先頭にすると、、、
main.scss
1//---------- media Query --------------// 2// デバイス定義 3$type: sp tb pc; 4// media-query.scssをインポート 5@import "media_query"; 6 7// タブレット 8@media only screen and (max-width: 980px) { 9 $type: tb; 10 @import "media_query"; 11} 12 13// スマホ 14@media only screen and (max-width: 640px) { 15 $type: sp; 16 @import "media_query"; 17} 18 19// PC 20@media only screen and (max-width: 1200px) { 21 $type: pc; 22 @import "media_query"; 23}
↓
main.css
1@media only screen and (max-width: 980px) { 2 .topLogo { 3 background-size: 100%; } } 4
今度は、
@if $type == tb のみ書き出されました。
要するに、main.scss で書かれている先頭のサイズのメディアクエリのみがcssに書き出されているということになっています。
(その他のscss情報は全て正常に書き出されております。)
色々と試してみたのですが、解決にいたっておりません。。。
皆様の知恵を授けていただきたく質問させていただきました。
どうか何卒よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。