My way to implement media queries using SCSS mixins

What is SCSS

A CSS preprocessor scripting language, specifically SCSS (Sassy CSS), is a powerful tool that enhances the capabilities of traditional CSS by adding programming features. SCSS acts as an extension to CSS, allowing developers to write more efficient and maintainable stylesheets. It introduces variables, nesting, mixins, functions, and other advanced features, enabling the creation of reusable code snippets and modular styles. SCSS files are compiled into regular CSS, which can be understood by web browsers. By leveraging SCSS, developers can streamline their CSS workflow, improve code organization, and achieve greater flexibility and control over their stylesheets.

What are CSS media queries

CSS media queries are a feature of Cascading Style Sheets (CSS) that allow developers to apply specific styles to a webpage based on various device characteristics and viewport properties. Media queries enable responsive web design by targeting different screen sizes, resolutions, orientations, and other attributes of the user's device. By using media queries, developers can create layouts and styles that adapt and respond to different devices, ensuring a consistent and optimized user experience across a wide range of screens. Media queries are written using CSS syntax and are typically placed within the CSS file or in a separate stylesheet to define different styles for different devices or screen sizes.

Create mixins for media queries

@mixin devices($breakpoint) {
  @if $breakpoint == tablet {
    @media only screen and (max-width: 720px) {
      @content;
    }
  }

  @if $breakpoint == mobile {
    @media only screen and (max-width: 481px) {
      @content;
    }
  }
}

Write your SCSS class like a pro

.container {
  background: red;

  @include devices(tablet) {
    background: blue;
  }

  @include devices(mobile) {
    background: green;
  }
}