0
0
SASSmarkup~5 mins

Why SASS improves responsive workflows

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

SASS helps write CSS faster and cleaner. It makes managing styles for different screen sizes easier.

You want to create a website that looks good on phones, tablets, and desktops.
You need to reuse style rules for different screen widths without repeating code.
You want to organize your CSS better with variables and mixins for responsiveness.
You want to quickly adjust breakpoints in one place instead of many CSS files.
You want to write less code but get more control over responsive design.
Syntax
SASS
@mixin respond-to($breakpoint) {
  @if $breakpoint == phone {
    @media (max-width: 600px) {
      @content;
    }
  } @else if $breakpoint == tablet {
    @media (max-width: 900px) {
      @content;
    }
  }
}

@mixin defines reusable blocks of styles.

@content inserts styles where the mixin is used.

Examples
This example changes container width on small screens using a mixin.
SASS
@mixin respond-to($breakpoint) {
  @if $breakpoint == phone {
    @media (max-width: 600px) {
      @content;
    }
  }
}

.container {
  width: 100%;
  @include respond-to(phone) {
    width: 90%;
  }
}
Using a map to store breakpoints makes it easy to update screen sizes in one place.
SASS
$breakpoints: (
  phone: 600px,
  tablet: 900px
);

@mixin respond-to($device) {
  @media (max-width: map-get($breakpoints, $device)) {
    @content;
  }
}
Sample Program

This page shows a green box that is half the screen wide on large screens. On small screens (600px or less), it becomes 90% wide. This is done using SASS mixins compiled to CSS media queries.

SASS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Responsive Box with SASS</title>
  <style>
    /* Compiled CSS from SASS below */
    .box {
      background-color: #4caf50;
      color: white;
      padding: 1rem;
      width: 50%;
      margin: 1rem auto;
      text-align: center;
    }
    @media (max-width: 600px) {
      .box {
        width: 90%;
      }
    }
  </style>
</head>
<body>
  <div class="box">Resize the browser to see me change width!</div>
</body>
</html>
OutputSuccess
Important Notes

SASS variables and mixins let you change breakpoints easily in one place.

Using mixins avoids repeating media query code everywhere.

Organizing responsive styles with SASS keeps your CSS clean and easier to maintain.

Summary

SASS makes writing responsive CSS faster and less repetitive.

Mixins and variables help manage screen size rules in one place.

Using SASS improves your workflow and keeps styles organized.