Hello, I'm Maneshwar. I'm working on FreeDevTools online currently building **one place for all dev tools, cheat codes, and TLDRs* — a free, open-source hub where developers can quickly find and use tools without any hassle of searching all over the internet.
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($map, $device) {
@if map-has-key($map, $device) {
@return map-get($map, $device);
} @else {
@warn "Breakpoint '#{$device}' not found in $break-devices.";
@return null;
}
}
This function checks if a given $device exists within the $map. If it does, the corresponding value is returned; otherwise, a warning is issued, and null is returned.
2. Defining Sass Maps
Sass maps are defined using parentheses and key-value pairs. Here’s how the $break-devices map might be structured:
$break-devices: (
mobile: 320px,
tablet: 768px,
desktop: 1024px,
large: 1200px
);
In this map, mobile, tablet, desktop, and large are keys that represent different devices, with their corresponding pixel values as the values.
3. Checking Map Existence with map-has-key
The map-has-key function is used to verify whether a map contains a specific key:
@if map-has-key($break-devices, tablet) {
// Styles for tablets
.element {
font-size: 16px;
}
}
This checks if the $break-devices map has a key named tablet.
4. Accessing Map Values with map-get
The map-get function retrieves the value associated with a key in a map:
$tablet-breakpoint: map-get($break-devices, tablet);
@media (min-width: $tablet-breakpoint) {
// Styles for tablets and larger devices
.element {
font-size: 18px;
}
}
Here, $tablet-breakpoint is assigned the value of the tablet key from the $break-devices map.
5. Merging Maps with map-merge
The map-merge function combines two maps into one. If there are conflicting keys, the values from the second map override those of the first:
$new-breakpoints: (
extra-large: 1440px
);
$break-devices: map-merge($break-devices, $new-breakpoints);
The $break-devices map is updated with the extra-large breakpoint.
6. Removing Key-Value Pairs with map-remove
The map-remove function removes a key-value pair from a map:
$break-devices: map-remove($break-devices, mobile);
The mobile breakpoint is removed from the $break-devices map.
7. Looping Through Maps with @each
The @each directive can iterate over each key-value pair in a map:
@each $device, $breakpoint in $break-devices {
@media (min-width: $breakpoint) {
.element {
font-size: 20px; // Example style
}
}
}
This loop generates media queries for each breakpoint in the $break-devices map, applying specific styles for each device.
8. Using Maps in Media Queries
Sass maps are particularly useful for managing media queries in responsive designs:
@mixin respond-to($device) {
@if map-has-key($break-devices, $device) {
$breakpoint: map-get($break-devices, $device);
@media (min-width: $breakpoint) {
@content;
}
} @else {
@warn "Breakpoint '#{$device}' not found in $break-devices.";
}
}
.element {
font-size: 16px;
@include respond-to(tablet) {
font-size: 18px;
}
@include respond-to(desktop) {
font-size: 20px;
}
}
The respond-to mixin simplifies the creation of media queries based on the breakpoints defined in the $break-devices map.
9. Dynamic Map Generation
Sass maps can be generated dynamically using loops and functions:
$dynamic-map: ();
@for $i from 1 through 5 {
$dynamic-map: map-merge($dynamic-map, ("key-#{$i}": $i * 10));
}
// $dynamic-map will be: ("key-1": 10, "key-2": 20, "key-3": 30, "key-4": 40, "key-5": 50)
This example creates a map with keys key-1 through key-5 and corresponding values from 10 to 50.
10. Nesting Maps
Sass maps can be nested to create more complex data structures:
$themes: (
light: (
background: #ffffff,
text: #000000
),
dark: (
background: #000000,
text: #ffffff
)
);
body {
background-color: map-get(map-get($themes, light), background);
color: map-get(map-get($themes, light), text);
}
This example defines a $themes map with nested maps for light and dark themes, each containing background and text colors.
Using Sass maps effectively can greatly improve the organization and maintainability of your SCSS code, especially in managing responsive breakpoints and theming.
s
@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.
scss
@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:
scss
@include break-from-device(mobile portrait) {
body {
background-color: #ffffff;
color: #333;
font-size: 14px;
}
}
Generated Media Query:
css
@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:
scss
@include break-to-device(tablet landscape) {
.sidebar {
display: none;
background-color: #121212;
}
}
Generated Media Query:
css
@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.
If you're curious about Sass maps or want to learn more, 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:
I’ve been building FreeDevTools.
A collection of UI/UX-focused tools crafted to simplify workflows, save time, and reduce friction in searching tools/materials.
Any feedback or contributors are welcome!
It’s online, open-source, and ready for anyone to use.
👉 Check it out: FreeDevTools
⭐ Star it on GitHub: freedevtools
Let’s make it even better together.
Top comments (0)