Add: SASS - each media

This commit is contained in:
alstjr7375 2021-12-15 16:27:09 +09:00
parent 93adcb715b
commit bc5d5a0a4f
2 changed files with 63 additions and 0 deletions

45
__tests__/media.test.scss Normal file
View file

@ -0,0 +1,45 @@
@use 'true' as *;
@use "../src/utils/media";
// TODO: Need more tests..
@include test-module("Create each media at once [mix]") {
@include test("simple") {
@include assert {
@include output {
$input: "hover: hover" "max-width: 1024px";
@include media.each($input) {
body {
font-size: 16px;
}
}
}
@include expect {
@media (hover: hover), (max-width: 1024px) {
body {
font-size: 16px;
}
}
}
}
}
@include test("beyond") {
@include assert {
@include output {
$input: "hover: hover" "max-width: 1024px";
body {
@include media.each($input) {
font-size: 16px;
}
}
}
@include expect {
@media (hover: hover), (max-width: 1024px) {
body {
font-size: 16px;
}
}
}
}
}
}

18
src/utils/_media.scss Normal file
View file

@ -0,0 +1,18 @@
@use "sass:list";
@use "list" as list-utils;
@mixin each($list) {
$listL: list.length($list);
@if $listL != 1 {
@for $i from 1 through ($listL - 1) {
$media: list.nth($list, $i);
$list: list.set-nth($list, $i, "(" + $media + "), ");
}
}
$media: list.nth($list, $listL);
$list: list.set-nth($list, $listL, "(" + $media + ")");
@media #{list-utils.to-string($list)} {
@content;
}
}