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?