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:
Top comments (0)