Meet Landing Page using Sass/SCSS, Flexbox, and Media Queries

The native CSS media queries don't support variables unfortunately. That's why I came up with a custom SCSS solution to organize media queries and breakpoints.

When I create a new project, I always paste this _media-queries.scss file into the project:

@use 'sass:math';

$breakpoint-tablet-min: 550px;
$breakpoint-laptop-min: 1100px;
$breakpoint-desktop-min: 1500px;

$font-size-base: 16px;

$tablet-and-bigger: '(min-width: #{math.div($breakpoint-tablet-min, $font-size-base)}rem)';
$laptop-and-bigger: '(min-width: #{math.div($breakpoint-laptop-min, $font-size-base)}rem)';
$desktop-and-bigger: '(min-width: #{math.div($breakpoint-desktop-min, $font-size-base)}rem)';

It's inspired by Josh Comeau:

• With this approach you can define pixels as breakpoints and convert them to rem.
• The breakpoints are in areas with few devices, so each category (mobile, tablet, laptop, desktop) has the same experience.
• The media queries can be called tablet-and-bigger, ...

Then I use these media queries in the following way:

/* import `_media-queries.scss` file here */

div {
  padding: 1rem;

  @media #{$tablet-and-bigger} {
    padding: 1.5rem;
  }

  @media #{$laptop-and-bigger} {
    padding: 2rem;
  }

  @media #{$desktop-and-bigger} {
    padding: 2.5rem;
  }
}

My SCSS folder structure is inspired by this YouTube video.