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

代表的なmixin

mq_sp​

SP向けレイアウト用@media生成

@include mq_sp {
    // SPレイアウトスタイル
}

// @media (max-width: (ブレイクポイント)px)

mq_pc​

PC向けレイアウト用@media生成

@include mq_pc {
    // PCレイアウトスタイル
}

// @media (min-width: (ブレイクポイント) + 1px)

mq_under​

指定サイズ以上向け@media生成

@include mq_under(number) {
    // 指定サイズ以上向けスタイル
}

// @media (min-width: (number) + 1px)

mq_over​

指定サイズ以下向け@media生成

@include mq_over(number) {
    // 指定サイズ以下向けスタイル
}

// @media (max-width: (number)px)

get_vw​

pxからvwを計算

get_vw(元px, 基準幅)

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