Scssの【@mixin】

Scssの【@mixin】

構築する際、サイトを切り替えるポイントを事前に決めておきたい!特定のサイズ以下、以上は決め打ちにしたい!という事が多いと思います~
そんな時のために、事前にブレイクポイントを整えておくと、未来の自分がしあわせになります!

ざっくりですが、@mixinとは変数を作り、定義して、@includeで呼び出すのに使われます。

主に、流用パーツの作製やブレイクポイントの設定、テキストルールなどで使ったりします。

今回は、自分が直近で使ったmixinの設定を共有しようと思います。

$breakpoint-sm: 400px !default;
$breakpoint-md: 768px !default;
$breakpoint-lg: 1000px !default;
$breakpoint-xl: 1280px !default;

$breakpoints: (
'sm': 'screen and (min-width: 400px)',
'md': 'screen and (min-width: 768px)',
'lg': 'screen and (min-width: 1000px)',
'xl': 'screen and (min-width: 1280px)',
) !default;

//md(768px)を基準値とします
@mixin mq($breakpoint: md) {
@media #{map-get($breakpoints, $breakpoint)} {
@content;
}
}

ざっと、貼り付けました!

主に、ここではブラウザサイズの定義で使用しております。
768pxを基準として設定し、要件に合わせてサイズを変更しています。命名はわかりやすいようにbootstrap風にしています。
流用パーツなどは、_btn.scss や _text.scssなどを作成して細分化しております。
理由としては、管理重視といった所です。
 
サンプル用のコードを下記に載せておきます。
 
 

See the Pen 20210115‗エムトラッド用 by aoyagi (@aoyagi) on CodePen.29653