Simplified Responsive Web Development with SCSS/SASS

#css #tutorial #webdev #scss

Building responsive webpages can be challenging, especially when it comes to managing breakpoints and media queries. However, using SCSS can make this task much more manageable and efficient.

In this article, we will explore a helpful SCSS pattern for managing breakpoints and creating media queries. Please note that this tutorial assumes some basic knowledge of CSS and media queries.

A Brief Introduction to SCSS

For readers unfamiliar with SCSS, it is a CSS preprocessor that lets you write CSS styles with added functionalities.

With SCSS, you can have variables, loops, functions, and lots more in your stylesheet. In the end, it compiles to regular CSS code that web browsers understand.

According to sass-lang.com, SCSS is CSS with superpowers. It makes styling a whole lot easier and faster; let's explore.

Approach - Preview

Say we have elements with the class name list-item and we want to achieve the following:

On small screen widths, we want a font-size of 18px,
Then on larger screen widths, we want a font-size of 25px.

Here's a preview of how it works using this approach:

SCSS Code:

 .list-item {
     font-size: 18px;
     @include sm {
       font-size: 25px
     }
 }

Compiled CSS Output:

.list-item {
  font-size: 18px;
}
@media only screen and (min-width 600px) {
  .list-item {
    font-size: 25px;
  }
}

As seen above, @include sm is all that was needed.

Why this approach?

Simplicity and Maintainability

From the example above, we see that the responsive styles are nested within the same selector.

So whenever there is a need to maintain the rules for a selector, you'd have all of them in one place, instead of travelling through different media-query sections and redefining rules.

Also, it comes with simple conventional labels. If you're used to styling libraries with classes such as "col-sm-2" and "col-md-4", you can achieve this in your stylesheets:

.div {
    @include sm {
        grid-template-columns: 1fr 1fr;
    }
    @include md {
        grid-template-columns: repeat(4, 1fr);
    }
}

Implementation

This is achieved by combining the powers of SCSS mixins and content blocks.

Mixins let you define reusable style blocks, and content lets you project/embed styles into an already defined mixin.

Below is SCSS code that defines a mixin for small breakpoint - sm and embeds a media query for 600px.


 @mixin sm {

     @media only screen and(min-width 600px){
         @content; // projected content will be embedded here
     }

 }

C'est fini! Now whenever a selector needs specific styles for this media query, we include the mixin using its name, @include sm {...}.

Mobile First Consideration

Mobile first approach is a method of styling that prioritizes small screens. Styles are written for small screens first, then modified with queries for larger screens.

The examples used in this article so far follows this principle, but there are cases where the reverse is required.

I like to have mixins available for both methods. The major difference in the media queries are min-width: and max-width:.

I have created an SCSS snippet that contains my default breakpoints, you can find it on GitHub - breakpoints.scss.

Bundle Size Consideration

Using this approach may leave your final CSS output with many media query declarations. This is because for every @include, a corresponding media query is generated.

Depending on the size of your project, generating so many media query declarations may greatly affect its bundle size.

Every byte matters.

If you are very conscious about application bundle size, like I am, worry not. Thankfully there is a webpack plugin that groups similar media queries.

Hence, in your final CSS output, you get the old-fashioned single media query declaration (Yaaaay!).

Kindly checkout the plugin on NPM to find out more.