I am striving to enhance my SASS media query mixin by introducing different variations of input to it.
@media(medium)
@media([small, to-large])
@media([[small, to-large], [small, landscape]])However, I am encountering an issue with an if statement. I am perplexed as to why it is passing even though it is false. What could I be doing wrong? Any ideas?
@if (type-of($queries) == "list" and type-of(nth($queries, 1) == "list")) {
// do something
} @else {
// do something
}
Here is the query that passes even though it's false
.block {
@include media([small, to-large]) {
background-color: blue;
}
}
Check out the full example here:
@mixin media($queries, $only-screen: false) {
$media-query: "";
$media-query: if($only-screen, "only screen and ", "");
@debug type-of($queries) == "list" and type-of(nth($queries, 1)) == 'list';
@debug type-of(nth($queries, 1));
@if (type-of($queries) == "list" and type-of(nth($queries, 1) == 'list')) {
@debug 'hey';
@for $p from 1 through length($queries) {
$array: nth($queries, $p);
$media-query: $media-query + composeMediaQuery($array);
@if ($p < length($queries)) {
$media-query: $media-query + ", ";
}
}
} @else {
$media-query: composeMediaQuery($queries);
}
@if ($media-query) {
@media #{$media-query} {
@content;
}
} @else {
@warn "There is no query please check your input to the @include media()";
}
}
@function composeMediaQuery($array) {
$media-query: "";
@for $i from 1 through length($array) {
$query: inspect(map-get($media-queries, nth($array, $i)));
@if ($query) {
@if ($i == 1) {
$media-query: $media-query + $query;
} @else {
$media-query: $media-query + " and " + $query;
}
} @else {
@warn "Unfortunately, no value could be retrieved from `#{$media-queries}`. "
+ "Please make sure it is defined in `$media-queries` map.";
}
}
@return $media-query;
}
$media-queries: (
to-small: (
max-width: 766px
),
small: (
min-width: 767px
),
to-medium: (
max-width: 991px
),
medium: (
min-width: 992px
),
to-large: (
max-width: 1199px
),
large: (
min-width: 1200px
),
to-x-large: (
max-width: 1599px
),
x-large: (
min-width: 1600px
),
grid-two: (
min-width: 767px
),
grid-three: (
min-width: 1010px
),
grid-four: (
min-width: 1340px
),
docked-cart: (
min-width: 1700px
),
min-width-docking: (
min-width: 1680px
),
target-ie: (
-ms-high-contrast: none
),
landscape: (
orientation: landscape
),
portrait: (
orientation: portrait
)
);
.block {
@include media([[small, to-large], [landscape, to-medium]]) {
background-color: blue;
}
@include media([small, to-large]) {
background-color: blue;
}
}Feel free to visit the CodePen link for checking the compiled output and console log.