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

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

Laravel Best Practices: Building Robust and Maintainable Applications

Image
Laravel is one of the most popular PHP frameworks due to its elegance, simplicity, and developer-friendly syntax. But to fully harness Laravel’s power, developers must adhere to certain best practices that ensure their applications are secure, maintainable, and scalable. In this article, we’ll explore typical best practices for Laravel , drawing examples from a real-world scenario—an admin system handling borrow requests. 1. Use Service Classes for Business Logic Why? Keeping your controllers thin and offloading business logic to service classes promotes separation of concerns and cleaner code. public function approveRequestAction($borrowId): JsonResponse { $this->borrowService->approve($borrowId); return response()->json(['message' => 'Request approved']); } 2. Exception Handling Graceful error handling provides better developer and user experience. Use try-catch blocks and Laravel’s built-in exceptions like ModelNotFoundException . try { $th...
Read more