How Sass Maps Work

Sass maps are powerful tools for organizing data in SCSS, helps to manage breakpoints for responsive designs.

Here’s a dive into how these maps work, focusing on the $break-devices map and its utility.

---

1. Extracting Breakpoint Values with Functions

The break-select-device function navigates the $break-devices map to extract breakpoint values for a specified device.

@function break-select-device($device) {
  $current: $break-devices;
  @for $n from 1 through length($device) {
    @if type-of($current) == map {
      $current: map.get($current, list.nth($device, $n));
    } @else {
      @error "Invalid device map: #{$device}";
    }
  }
  @return $current;
}

• Key Mechanisms:
  • @for Loop: Traverses the hierarchy to find the correct device and its breakpoints.
  • Error Handling: Stops execution if the provided device is invalid.
  • map.get: Extracts values at each level of the hierarchy.

---

2. Generating Media Queries with Mixins

The break-from-device and break-to-device mixins utilize the extracted breakpoints to dynamically generate media queries.

@mixin break-from-device($device) {
  @if type-of($device) == list {
    $breakpoint: break-select-device($device);
    $min: list.nth($breakpoint, 1);

    @media screen and (min-width: $min) {
      @content;
    }
  }
}

@mixin break-to-device($device) {
  @if type-of($device) == list {
    $breakpoint: break-select-device($device);
    $max: list.nth($breakpoint, 2);

    @media screen and (max-width: $max) {
      @content;
    }
  }
}

These mixins streamline responsive design by abstracting complex logic into reusable SCSS blocks.

---

Example Applications in Light and Dark Themes

Light Theme: Mobile Devices

Targeting mobile portrait devices to adjust background and font size for better readability:

@include break-from-device(mobile portrait) {
  body {
    background-color: #ffffff;
    color: #333;
    font-size: 14px;
  }
}

Generated Media Query:

@media screen and (min-width: 220px) {
  body {
    background-color: #ffffff;
    color: #333;
    font-size: 14px;
  }
}

---

Dark Theme: Tablet Landscape

Hiding the sidebar for tablets in landscape mode to optimize screen space:

@include break-to-device(tablet landscape) {
  .sidebar {
    display: none;
    background-color: #121212;
  }
}

Generated Media Query:

@media screen and (max-width: 1219px) {
  .sidebar {
    display: none;
    background-color: #121212;
  }
}

---

Final Thoughts

Sass maps and mixins like these enable clean, scalable, and maintainable responsive design workflows.

While exploring their implementation, I've been learning how to adapt these techniques for LiveAPI, a product I've been passionately working on for quite a while.

If you're curious about Sass maps or want to learn more about LiveAPI, feel free to check it out.

And don’t forget to follow me for tomorrow's in-depth analysis of Sass maps, where we’ll dissect their design architecture and advanced use cases.

Checkout:

How This SCSS Project Stays Organized Starting from a Map

Athreya aka Maneshwar ・ Dec 29

#webdev #programming #design #css