![見出し画像](https://assets.st-note.com/production/uploads/images/89467704/rectangle_large_type_2_b1e8a926553e0b94ac048fa6ce11f0d5.png?width=1200)
Photo by
chiyoizmo
【DartSass】で【@mixin @include】を使い【メディアクエリ指定】する方法
Youtubeにあまり載ってないので自分の備忘録として。
ー 状況 ー
📍 DartSassを使う
📍 何となく名前空間を使うらしい、ということはわかっている
📍今までも@mixinと@includeを使ってSassをかいていた
① _mixin.scssというファイルを作成
自分の場合は、スマホ縦と横の時以外はPC表示にしたかったのでその様な記述をする
![](https://assets.st-note.com/img/1666347584443-4iQc6mqZQw.png?width=1200)
② style.scssに各パーシャルのscssを呼び出し名前空間をつける
自分の場合、使うパーシャルが少ないので省略形で記述している
多い人は全て『as *』でかいてる人もいるっぽい
![](https://assets.st-note.com/img/1666347834937-qDMO3q8pMU.png?width=1200)
③ 使いたい箇所に「@include+名前空間+引数」{}で記述
![](https://assets.st-note.com/img/1666348035686-pDEz9bQhMC.png?width=1200)
完了!!
この記事が気に入ったらサポートをしてみませんか?