構築する際、サイトを切り替えるポイントを事前に決めておきたい！特定のサイズ以下、以上は決め打ちにしたい！という事が多いと思います～
そんな時のために、事前にブレイクポイントを整えておくと、未来の自分がしあわせになります！
ざっくりですが、@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
