sassでレスポンシブに変数を扱いたい時
#sass #レスポンシブ
変数を上書きするようにメディアクエリ内で書いても意味ない
cssに書き出されるのを想像してもらえばわかると思う
(なお、CSSカスタムプロパティ ならば（通常のプロパティと同じくカスケード規則に従うので）実際にメディアクエリ内で書いて上書きできる変数が使える)
以下にmixinを利用してsassでレスポンシブに変数を扱う実装例を示す
code:scss
div {
@mixin setWidth($w) {
width: $w;
img {
width: $w;
}
}
@include sp {
@include setWidth(100px);
}
@include pc {
@include setWidth(200px);
}
}
divにセットしたいwidthをmixinでロジックを書く
メディアクエリ内でmixinをincludeする
下のsp,pcはmixinでメディアクエリを参照