$breakpoints: ( 'sm': 'screen and (max-width: 414px)', 'md': 'screen and (max-width: 767px)', 'lg': 'screen and (max-width: 999px)', 'xl': 'screen and (max-width: 1199px)', ) !default; //上で設定した変数をmq()で呼び出せるようにmixinを定義 @mixin mq($breakpoint: md) { @media #{map-get($breakpoints, $breakpoint)} { @content; } } //使うとき .txt{ margin-left: 25.4%; @include mq(){ //引数を設定しない時は初期値のmd margin-left: 0%; } @include mq(lg){ //引数を設定する場合 margin-left: 0%; } }