SCSS + Vuetify

_scssVuetify.md

SASS + Vuetify Mixin

This is the absolute bare bones breakpoint mixin to make things very, very easy during development.

mixins.scss

@mixin breakpoint($map) {
  $bp: $map;
  @if (type-of($map) == 'number') {
    $bp: nth($breakpoints, $map);
  }
  $query: "";
  @if map-has-key($bp, min) { $query: append($query, "(min-width: #{map-get($bp, min)})") }
  @if map-has-key($bp, min) and map-has-key($bp, max) { $query: append($query, "and") }
  @if map-has-key($bp, max) { $query: append($query, "(max-width: #{map-get($bp, max)})") }
  @media screen and #{$query} { @content; }
}

// Usage
@include breakpoint($sm) {
  ...
}
// is the same as
@include breakpoint(2) {
  ...
}

variables.scss

// Breakpoints, matching Vuetify
// @see https://vuetifyjs.com/en/layout/breakpoints
$xs: ( max:  599px );
$sm: ( min:  600px );
$md: ( min:  960px );
$lg: ( min: 1264px );
$xl: ( min: 1904px );
$sm-only: ( min: map-get($sm, min), max: map-get($md, min) - 1 );
$md-only: ( min: map-get($md, min), max: map-get($lg, min) - 1 );
$lg-only: ( min: map-get($lg, min), max: map-get($xl, min) - 1 );
$breakpoints: $xs, $sm, $md, $lg, $xl;