Skip to content

Instantly share code, notes, and snippets.

@mavame mavame/breakpoint.scss
Last active May 2, 2019

Embed
What would you like to do?
Breakpoint SASS mixin
$breakpoints: (
xs: 24rem,
sm: 32rem,
md: 54rem,
lg: 64rem,
xl: 80rem
);
// mobile-first breakpoint mixin
@mixin breakpoint($breakpoint: md, $key: min, $orientation: false) {
@if ($orientation) {
@media (#{$key}-width: map-get($breakpoints, $breakpoint)) and (orientation : $orientation) {
@content;
}
} @else {
@media (#{$key}-width: map-get($breakpoints, $breakpoint)) {
@content;
}
}
}
// example use
@import 'breakpoint';
.selector {
font-size: 1rem;
@include breakpoint() {
font-size: 2rem;
}
@include breakpoint(sm, max) {
font-size: 12px;
}
@include breakpoint(lg, min, landscape) {
font-size: 40vh;
}
}
.selector {
font-size: 1rem;
}
@media (min-width: 54rem) {
.selector {
font-size: 2rem;
}
}
@media (max-width: 32rem) {
.selector {
font-size: 12px;
}
}
@media (min-with: 64rem) and (orientation: landscape) {
.selector {
font-size: 40vh;
}
}
@mavame

This comment has been minimized.

Copy link
Owner Author

mavame commented Aug 8, 2017

The arguments are as follows:

  • $breakpoint: a breakpoint key, from the $breakpoints map above
  • $key: min or max
  • $orientation: can be landscape or portrait. If ommitted, ignored.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.