What is the best way to create a @mixin incorporating variables to easily reference breakpoints using custom aliases?

Currently in the process of constructing a website using SASS coding, I have created several @mixins for Media Queries that will be utilized later with the @include directive.

The structure of these mixins is as follows:

_standards.sass
// Media queries
@mixin for-phone-only 
  @media (max-width: 37.4375rem) 
    @content 

@mixin for-tablet-portrait-up 
  @media screen and (min-width: 37.5rem) 
    @content 

@mixin for-tablet-landscape-up 
  @media screen and (min-width: 56.25rem) 
    @content 

@mixin for-desktop-up 
  @media screen and (min-width: 75rem) 
    @content

@mixin for-big-desktop-up 
  @media screen and (min-width: 112.5rem) 
    @content

While they are currently functioning effectively, I am looking to enhance their efficiency by introducing variables that can be associated with breakpoint aliases and values. This would allow me to streamline the conversion into mixins, similar to the example below:

// sassmeister.com
// Retrieving Alias
@function getAlias($alias)
  $breakpointsAliases: ("xs": for-phone-only, "sm": for-tablet-portrait-up, "md"": for-tablet-landascape-up, "lg": for-desktop-up, "xl": for-big-desktop-up)
  @return map-get($breakpointsAliases, $alias)
// Retrieving the breakpoint value (e.g.:(min-width: x))
@function getBreakpoint($breakpoint)
  $breakpoints: ("xs": (max-width: 37.4375rem), "sm": (min-width: 37.5rem), "md": (min-width: 56.25rem), "lg": (min-width: 75rem), "xl": (min-width: 112.5rem))
  @return map-get($breakpoints, $breakpoint)

// Mixin 
@mixin getAlias($breakpointAlias)
  @media screen and (getBreakpoint($breakpoints))
    @content

// Initiating the query (testing)
*
  @include for-phone-only
    margin: 0

Upon testing this on sassmeister, I encountered an error indicating that the mixin was undefined and therefore not functional.

Undefined mixin.
   ╷
15 │ ┌   @include for-phone-only
16 │ └     margin: 0
   ╵
  stdin 15:3  root stylesheet on line 15 at column 3

Is there a correct approach to achieve this? Or am I investing my time in the wrong direction?

Answer №1

Check out this awesome mixin for responsive design breakpoints:

@mixin breakpoint($map) {
    $query: '';
    @if map-has-key($map, media) {$query: append($query, '#{map-get($map, media)} and');}
    @if map-has-key($map, min-width) {$query: append($query, '(min-width: #{map-get($map, min-width)})');}
    @if map-has-key($map, min-width) and map-has-key($map, max-width) {$query: append($query, "and");}
    @if map-has-key($map, max-width) {$query: append($query, '(max-width: #{map-get($map, max-width)})');}
    @media #{$query} {@content;}
}

To use it in your styles, follow this pattern:

h1 {
    font-size: 20px;
    color: #000;
    @include breakpoint((min-width: 860px)) {
        some-property: someValue;
    }
}

p {
    margin: 0;
    @include breakpoint((min-width: 860px, max-width: 1000px)) {
        some-property: someValue;
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The sequence of HTML attributes

Could there be a subjective angle to this question (or maybe not)... I work on crafting web designs and applications using Visual Studio and typically Bootstrap. When I drag and drop a CSS file into an HTML document, the code generated by Visual Studio loo ...

What is the best way to eliminate the gap above a block element using CSS?

Currently in the process of designing a website, I am faced with a challenging issue that seems to have me stumped. The structure of my page consists entirely of HTML DIVs, with certain elements nested within their parent DIVs. My main dilemma lies in tryi ...

Click to enlarge font size across the entire project

I'm working on a project for elderly users and my client wants a feature where they can easily adjust the font size throughout the application with just one click of a button. What is the best approach for implementing this functionality? My initial ...

Implement a menu that can be scrolled through, but disable the ability to scroll on the body of the website

When viewed on a small screen, my website transforms its menu into a hamburger button. Clicking the button toggles a sidebar displaying a stacked version of the menu on top of the normal website (position: fixed; z-index: 5;). This sidebar also triggers a ...

Can a partially see-through front color be placed on top of an image?

My goal is to add a foreground color with opacity over some images within a div, allowing the image to still be visible. I've come across solutions on S.O., like this one, but they don't quite achieve what I'm looking for. Below is my HTML ...

The use of Angular's ngClass directive does not work within the link function

I have a straightforward directive that renders an element, and this is the template: <div class="nav-item"></div> The .nav-item class looks like this: .nav-item { height: 50; } Here's the directive in action: angular.module('m ...

Adaptive Table Layout that Creates a Page-breaking Design

I have a page layout with three columns: a fixed-width left-hand navigation, a responsive content column, and a fixed-width right-hand navigation. The issue arises when the content in the middle column includes HTML tables that sometimes exceed the availab ...

Connections between Wordpress websites and CSS styling

My inquiry consists of three parts: I am currently in the process of constructing a portfolio website using Wordpress, and I have encountered some peculiar links. For instance, on my about page, the link appears as localhost/AFolder/anotherfolder/ind ...

The checkbox tab index fails to function properly when set to hidden with a custom design

I have implemented a custom design for a checkbox using CSS. label { position: relative; margin-bottom: 0.5em; } .input-field { width: 100%; border: 1px solid #ecf0f1; padding: 0.5em; } input[type="radio"], input[type="checkbox"] { display: ...

Hovering over an element and eliminating any extra space

Hey there, I'm looking for some assistance with removing the whitespace on hover. Below is the code along with a screenshot for reference: div.show_sizes_onhover { background: rgba(255,255,255,.9); bottom: -1px; color: #a1a1a1; left: 0; padding: 5px ...

Modify the color of the text input by the user in an AJAX-enhanced text box

After successfully implementing an autocomplete textbox using AJAX Autocomplete, I decided to enhance the feature with some Fuzzy logic. Now, as the user enters 3 characters, my database returns a list of records that match those characters. The search re ...

datepicker in bootstrap 4 obscured by the div

I am currently utilizing Bootstrap datepicker v4. However, I am facing an issue where the datepicker view is getting hidden behind the 'map' div. I have attempted to solve this problem by adding overflow: visible, but unfortunately, it does not s ...

"Utilize jQuery's append method to dynamically add elements to the DOM and ensure

I am currently facing an issue with my AJAX function that appends HTML to a page using the jQuery append method. The HTML being appended is quite large and contains cells with colors set by CSS within the same document. The problem I'm encountering i ...

extracting an attribute from a class's search functionality

Let's consider the following HTML structure: <div id="container"> <div> <div class="main" data-id="thisID"> </div> </div> </div> If I want to retrieve the value inside the data-id attribute ...

Is the "sticky footer" in CSS causing issues with the percentage height of nested divs?

My "main-section" div is designed to inherit its height from the parent div, known as the "wrapper." The wrapper div, in turn, takes its height from the body of the document. Both the HTML and body tags are set with a height of 100%. To implement the ...

Adjust item size and move them into the panel

I am looking to create a panel that arranges items in a specific layout shown here: https://i.stack.imgur.com/qw3lS.png Below is the code I have attempted so far: import React, { useCallback, useEffect } from "react"; import { Box, Grid, Tab, T ...

How to align a div with embedded tweets in the center

I am looking to include a series of tweets from Twitter in a div on a basic webpage. The challenge is centering this div horizontally on the page. I have tried using: <div style="text-align:center"> and also: <div style="width: 900px; display ...

Issue with content not wrapping inside the body tag (apart from using float or setting body and html to 100

Why on earth is the body/html or .main div not wrapping my .container div's when the browser width is between 767-960 px?! This is causing horizontal scrolling and I am completely baffled. This should definitely be working! The only code I have is: ...

the stacking context of elements with z-index and relative positioning

I am currently working on a modal that is toggled using JavaScript. Within the modal, I am dynamically adding an image using JavaScript. Additionally, there will be a div element overlaying the image to simulate cropping (extract coordinates from the imag ...

Tips for creating inline links

Data is taken from a table using $number and printed as follows: echo "<div class='pagination'><a href='page_pagination.php?number=". $number ."' > ". $number ." </a></div>"; The output does not display in one ...