Skip to main content

Typical mixins

mq_sp​

Generating @media for SP layout

@include mq_sp {
    // somthing style for SP layout
}

// @media (max-width: (break point)px)

mq_pc​

Generating @media for PC layout

@include mq_pc {
    // somthing style for PC layout
}

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

mq_under​

Generating @media for specific number and under width

@include mq_under(number) {
    // somthing style for specific number and under width
}

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

mq_over​

Generating @media for specific number and over width

@include mq_over(number) {
    // somthing style for specific number and over width
}

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

get_vw​

Calculating from px to vw

get_vw(original px, basis width)

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