Как правильно использовать точки останова с миксином в S CSS? - PullRequest
Новая
       3

Как правильно использовать точки останова с миксином в S CSS?

0 голосов
/ 02 февраля 2020

Я плох в S CSS, но у меня есть хороший код со всеми функциями и миксинами. Я понимаю, как это работает, но не могу их изменить. Я использую столбцы с точками останова для своего контента, и у меня есть html: 

<div class="content column-3@large column-2@medium column-1@small"></div>
<div class="content column-3@large column-2@medium column-1@small"></div>
<div class="content column-3@large column-2@medium column-1@small"></div>

Мои s css: 

.content {
   height: 200px;
   @for $i from 1 through 3 {
        @each $size, $width in $breakpoints {
            @include breakpoint($size) {
                &.column-#{$i}\@#{$size} {
                    width: calc(100%/#{$i} - 2.5rem/#{$i});
                }
            }
        }
    }
}

И это работает, даже если я изменю столбец всех чисел на 3,

, но если я изменю число столбцов в классах на column-1@large column-2@medium column-3@small,

, моя ширина будет всегда выбираться с помощью @ маленький. Или column-3@large column-2@medium column-3@small, мой средний размер будет игнорироваться.

Итак, насколько я понимаю, столбцы не должны превосходить друг друга в порядке увеличения размера.

Как я могу решить проблему? Не могли бы вы мне помочь? Итак, у меня есть миксин для точек останова: 

$breakpoints: (
    small: 0px,
    medium: 768px,
    large: 1024px,
) !default;

@mixin breakpoint($query) {

    @if(type-of($query) != 'string' and type-of($query) != 'list') {
        @warn "breakpoint mixin only accepts a string or a list, `#{$query}` given.";
    }

    $bp: nth($query, 1);
    $dir: if(length($query) > 1, nth($query, 2), up);

    @if not map-has-key($breakpoints, $bp) {
        @warn "breakpoint `#{$bp}` is not supported `small` is used instead. Available breakpoints: #{map-keys($breakpoints)}.";
        $bp: small;
    }
    @if not ($dir == 'up' or $dir == 'down' or $dir == 'only') {
        @warn "breakpoint direction `#{$dir}` is not supported `up` is used instead. Available breakpoints directions: up, down, only.";
        $dir: up;
    }

    $mqs: 'screen';
    $bpsl: length($breakpoints);
    $bpi: index(map-keys($breakpoints), $bp);
    $nbp: if($bpi + 1 <= $bpsl, $bpi + 1, null);
    $pbp: if($bpi > 1, $bpi - 1, null);

    $bpv: map-get($breakpoints, $bp);

    @if ($dir == 'up') {
        @if (strip-unit($bpv) > 0) {
            $mqs: 'screen and (min-width: #{strip-unit(rem-calc($bpv))*1em})';
        }
    }
    @if ($dir == 'down') {
        @if ($nbp) {
            $nbpv: map-get( $breakpoints, nth(map-keys($breakpoints), $nbp));
            $mqs: 'screen and (max-width: #{strip-unit(rem-calc($nbpv - 1))*1em})';
        }
    }
    @if ($dir == 'only') {
        @if (strip-unit($bpv) > 0) {
            $mqs: $mqs + ' and (min-width: #{strip-unit(rem-calc($bpv))*1em})';
        }
        @if ($nbp) {
            $nbpv: map-get( $breakpoints, nth(map-keys($breakpoints), $nbp));
            $mqs: $mqs + ' and (max-width: #{strip-unit(rem-calc($nbpv - 1))*1em})';
        }
    }

    @media #{$mqs} { @content; }

}
...