How to use SCSS media queries efficiently in your react project

↓ Blogs

How to use SCSS media queries efficiently in your react project (Desktop-First) ?

Abhishek Choudhary

14 April, 2026

Objective

To ensure consistent, scalable, and maintainable responsive styling across projects using SCSS media queries with standardized breakpoints and patterns.

Responsive Design Approach

🖥 Desktop First (Mandatory)

1. Default styles target large desktop screens

2. Use max-width media queries to adapt styles on small screens

3. Smaller screens override desktop styles progressively

✔ Best for:

1. Admin Panels

2. Data heavy dashboards

3. Desktop centric products

Standard Breakpoints

Device Type	Breakpoint Name	Width (max-width)
Large Screens	xxl	>= 1400px (base)
Desktop	xl	1200px
Laptop	lg	992px
Tablet	md	768px
Mobile	sm	576px
Small Mobile	xs	480px

SCSS Breakpoint Variables

📁 File: _breakpoints.scss


$breakpoints: (
  xxs: (
    min: 320px,
    max: 319.98px,
  ),
  xs: (
    min: 450px,
    max: 449.98px,
  ),
  sm: (
    min: 576px,
    max: 575.98px,
  ),
  md: (
    min: 769px,
    max: 768.98px,
  ),
  lg: (
    min: 992px,
    max: 991.98px,
  ),
  xl: (
    min: 1200px,
    max: 1199.98px,
  ),
  xxl: (
    min: 1400px,
    max: 1399.98px,
  ),
);

Media Query Mixin


@mixin breakpoint($breakpoint, $direction: min) {
  @if map.has-key($breakpoints, $breakpoint) {
    $values: map.get($breakpoints, $breakpoint);
    $min: map.get($values, min);
    $max: map.get($values, max);

    @if $direction == min {
      @media (min-width: $min) {
        @content;
      }
    } @else {
      @media (max-width: $max) {
        @content;
      }
    }
  } @else {
    @if $direction == min {
      @media (min-width: $breakpoint) {
        @content;
      }
    } @else {
      @media (max-width: $breakpoint) {
        @content;
      }
    }
  }
}

🚫 Raw media queries should be avoided.


// ❌ Not allowed
@media (max-width: 768px) {}

✅ Always use mixin


@include breakpoint("md", min) {}

Usage Pattern (How Styles Must be Written)

✅ Correct Desktop First Pattern


.container {
  padding: 24px;
  font-size: 24px;
  display: flex;
  gap: 24px;
  margin-top: 4rem;
}

// Mobile / Table Styles
@include breakpoint('md', max) {
  .container {
    padding: 16px;
    font-size: 18px;
    margin-top: 3.2rem;
  }
}

@include breakpoint('sm', max) {
  .container {
    padding: 12px;
    font-size: 14px;
    margin-top: 2.4rem;
  }
}

// or the best way to do will be like this, nest media queries
@include breakpoint('md', max) {
  .container {
    padding: 16px;
    font-size: 18px;
    margin-top: 3.2rem;
  }
  @include breakpoint('sm', max) {
    .container {
    padding: 12px;
    font-size: 14px;
    margin-top: 2.4rem;
    }
  }
}

// this way the md breakpoint will not overlap it's styles over sm breakpoin

Device-Specific Styling Guidelines

🖥 Desktop (Default)

1. Multi-column layouts

2. Hover & advanced interactions

3. Large spacing

4. Font-size: 16px


.layout {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

🖥 Laptop (lg)

1. Reduce Spacing

2. Maintain multi-column layout


@include respond-down(lg) {
  .layout {
    grid-template-columns: repeat(3, 1fr);
  }
}

📱 Tablet (md)

1. Reduce Columns

2. Increase tap targets


@include respond-down(md) {
  .layout {
    grid-template-columns: repeat(2, 1fr);
  }
}

📱 Mobile (sm)

1. Single column

2. Stack content vertically

3. Disable hover only interactions


@include respond-down(sm) {
  .layout {
    grid-template-columns: 1fr;
  }
}

Rules & Best Practices

✅ Must Follow

✔ Desktop styles without media queries

✔ Only max-width queries

✔ Centralized breakpoint definitions

✔ Component level media queries

❌ Avoid

✖ Mixing min-width and max-width

✖ Device-specific names (ipad, iphone)

✖ Overriding entire components for small changes

Folder Structure


styles/
├── abstracts/
│   ├── _breakpoints.scss
│   ├── _media.scss
│   ├── _abstracts-dir.scss
├── base/
│   ├── _fonts.scss
│   ├── _typography.scss
│   ├── _colors.scss
│   ├── _base-dir.scss
├── components/
│   ├── _card.scss
│   ├── _button.scss
│   ├── _components-dir.scss
├── pages/
│   ├── _home.scss
│   ├── _about.scss
│   ├── _pages-dir.scss
├── layout/
│   ├── _footer.scss
│   ├── _header.scss
│   ├── _layout-dir.scss
├── style.scss

For example -> all components style file inside components folder will go in _components-dir.scss like the below :-


@use './card';
@use './button';

Then export the components in style.scss


@charset "UTF-8"; // for special characters if your stylesheet includes special characters like ₹ ₹ € ¥" 
@use "base/base-dir";
@use "abstracts/abstracts-dir";
@use "components/components-dir";
@use "layouts/layout-dir";
@use "pages/pages-dir";

You're all set now import style.scss file in your main.scss if you’re using react or in layout.tsx file if you are using next.js.

When to Use Desktop First

✔ Admin dashboards

✔ Enterprise apps

✔ Internal tools

✔ Data-dense UIs

🚫 Avoid for:

1. Content-first marketing sites

2. Mobile heavy consumer apps

Want to work together?

Get answers and advice from people you want it from. Techsphere designers and developers will help you create awesome softwares based on your requirements.

Popular Searches on Techsphere