メインコンテンツまでスキップ

代表的なmixin

ブレイクポイント​

メディアクエリ mixin は以下のブレイクポイントマップを使用します：

$breakpoints: (
    sp: 750,   // 375 * 2
    pc: 1060,
);

mq_under​

指定ブレイクポイント以下用の @media クエリ生成（max-width）

@include mq_under(sp) {
    // 750px 以下向けスタイル
}

// @media screen and (max-width: 750px)

mq_under_exact​

指定 px 値以下用の @media クエリ生成（max-width）

@include mq_under_exact(768) {
    // 768px 以下向けスタイル
}

// @media screen and (max-width: 768px)

mq_over​

指定ブレイクポイント以上用の @media クエリ生成（min-width）

@include mq_over(sp) {
    // 751px 以上向けスタイル
}

// @media screen and (min-width: 751px)

mq_over_exact​

指定 px 値以上用の @media クエリ生成（min-width）

@include mq_over_exact(768) {
    // 768px 以上向けスタイル
}

// @media screen and (min-width: 768px)

mq_between​

2つのブレイクポイント間用の @media クエリ生成

@include mq_between(sp, pc) {
    // 751px〜1060px 向けスタイル
}

// @media screen and (min-width: 751px) and (max-width: 1060px)

mq_between_exact​

2つの px 値間の @media クエリ生成

@include mq_between_exact(768, 1024) {
    // 768px〜1024px 向けスタイル
}

// @media screen and (min-width: 768px) and (max-width: 1024px)

get_vw​

pxからvwを計算

get_vw(元px, 基準幅)

.c-foo {
    font-size: get_vw(16, 1000);
    // -> (100 / 1000) * 16
    // -> font-size: 1.6vw
}