SCSS usage for small and large screens

 

Standard Responsive Breakpoints (Based on Bootstrap & Tailwind CSS)

Name	Screen Width (px)	Usage
xs (Extra Small)	< 576px	Very small devices (phones)
sm (Small)	576px – 640px	Small devices (phones)
md (Medium)	641px – 768px	Tablets
lg (Large)	769px – 1024px	Small laptops
xl (Extra Large)	1025px – 1280px	Desktops
2xl (Double Extra Large)	> 1280px	Large desktops

Example of SCSS Mixin with Breakpoints

If your @include sm is part of a mixin, it might be defined like this:

scss
@mixin xs {
    @media (max-width: 575px) { @content; }
}

@mixin sm {
    @media (max-width: 640px) { @content; }
}

@mixin md {
    @media (max-width: 768px) { @content; }
}

@mixin lg {
    @media (max-width: 1024px) { @content; }
}

@mixin xl {
    @media (max-width: 1280px) { @content; }
}

@mixin xxl {
    @media (max-width: 1536px) { @content; }
}

How to Use These Mixins

scss
@include sm {
    font-size: 14px;
    margin-bottom: 4px;
}

@include lg {
    font-size: 16px;
}

This means:

• On small screens (≤ 640px), font-size will be 14px.
• On large screens (≤ 1024px), font-size will be 16px.