Блог

Вот мой код:

 $responsive-adjust-amounts: (
2.5, //phone
2,   //tablet
1.5, //laptop
1.25 //desktop
);

$responsive-devices: ("#{$phone}", "#{$tablet}", "#{$laptop}", "#{$desktop}");

@each $device in $responsive-devices {
    @media #{$device} {
        @for $i from 1 through length($responsive-adjust-amounts) {
            @media #{$device} {
                #{nth($responsive-adjust-amounts, $i)} {
                    @include font-adjustments(nth($responsive-adjust-amounts, $i));
                }
            }
            $i: $i   1;
        }
    }
}
 

В конечном счете, я хочу, чтобы это привело к такому конечному результату:

 @media #{$phone} {
    @include font-adjustments(nth($responsive-adjust-amounts, 1));
}

@media #{$tablet} {
    @include font-adjustments(nth($responsive-adjust-amounts, 2));
}

@media #{$laptop} {
    @include font-adjustments(nth($responsive-adjust-amounts, 3));
}

@media #{$desktop} {
    @include font-adjustments(nth($responsive-adjust-amounts, 4));
}
 

Может ли кто-нибудь оказать какую-либо помощь там, где я застрял? Заранее благодарю вас!

Взволнованный, я только что решил свою собственную проблему. Вот как:

 @each $device in $responsive-devices {
    $i: index($responsive-devices, #{$device});
    @media #{$device} {
        @include font-adjustments(nth($responsive-adjust-amounts, $i))
    }
}
 

Кроме того, я забыл включить микширование настроек шрифта в исходное сообщение. Итак, вот это для любого обзора, если потребуется в будущем:

 @mixin font-adjustments($amount) {
    body {font-size: ($body-base * $amount)}
    h4 {font-size: ($subhead-base * $amount)}
    h1 {font-size: ($h1-base * $amount)}
}