Skip to main content

Typical mixins

Breakpoints​

The following breakpoint map is used by media query mixins:

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

mq_under​

Generating @media queries for a named breakpoint and below (max-width)

@include mq_under(sp) {
    // something style for 750px and under
}

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

mq_under_exact​

Generating @media queries for a specific pixel value and below (max-width)

@include mq_under_exact(768) {
    // something style for 768px and under
}

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

mq_over​

Generating @media queries for a named breakpoint and above (min-width)

@include mq_over(sp) {
    // something style for 751px and over
}

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

mq_over_exact​

Generating @media queries for a specific pixel value and above (min-width)

@include mq_over_exact(768) {
    // something style for 768px and over
}

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

mq_between​

Generating @media queries between two named breakpoints

@include mq_between(sp, pc) {
    // something style for 751px to 1060px
}

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

mq_between_exact​

Generating @media queries between two specific pixel values

@include mq_between_exact(768, 1024) {
    // something style for 768px to 1024px
}

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

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
}