SCSS usage for small and large screens

 

Standard Responsive Breakpoints (Based on Bootstrap & Tailwind CSS)

NameScreen Width (px)Usage
xs (Extra Small)< 576pxVery small devices (phones)
sm (Small)576px – 640pxSmall devices (phones)
md (Medium)641px – 768pxTablets
lg (Large)769px – 1024pxSmall laptops
xl (Extra Large)1025px – 1280pxDesktops
2xl (Double Extra Large)> 1280pxLarge 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.

Comments

Post a Comment

What is your thought about this?

Popular posts from this blog

Use the Google Custom Search JSON API to retrieve images

 To use the Google Custom Search JSON API to retrieve images, you need two things : ✅ 1. Google API Key 🔧 Steps: Go to the Google Cloud Console. Create a new project (or select an existing one). In the left sidebar, go to APIs & Services > Credentials . Click "Create credentials" > "API key" . Copy the API Key shown — you'll use this in your code. ✅ 2. Custom Search Engine ID (cx) 🔧 Steps: Go to the  Custom Search Engine (CSE) page. Click "Get Started" . Enter a domain to search (e.g., www.google.com or leave it as *.com to search the whole web). Click "Create" . After it's created, go to the Control Panel . Under "Search engine ID" , you'll see your cx value — copy this . 🛠 Enable Image Search: In the Custom Search Engine settings (Control Panel): Go to "Basics" > Sites to search → make sure it’s set to “Search the entire web” . Go to ...
Read more

Development-Testing Workflow

Follow this cycle during development: When creating a new feature : First write the factory for any new models Then write the feature test (even before the controller) Implement the controller to make the test pass When modifying a feature : First update the relevant factory if model changes Then update/add tests for the new behavior Finally implement the code changes
Read more

Terminal commands relared to files in the Ubuntu

 🔍 Viewing and Navigating Files Command Description ls List files and directories in the current directory ls -l Long listing (with permissions, size, date, etc.) ls -a Show hidden files (those starting with . ) cd [directory] Change directory pwd Print current working directory tree View directory structure in tree form (may need sudo apt install tree ) 📁 Creating and Managing Files Command Description touch filename Create a new empty file nano filename Edit a file using nano text editor cat filename View file contents more filename / less filename Scroll through file contents cp file1 file2 Copy a file mv oldname newname Rename or move a file rm filename Delete a file rm -i filename Delete with confirmation rm -f filename Force delete without confirmation 📂 Working with Directories Command Description mkdir directory_name Create a directory mkdir -p path/to/directory Create nested directories rmdir directory_name Remove empty directory rm -r directory_name Remove direc...
Read more