Получить (значение + 1) в цикле @each с несколькими значениями - PullRequest
Новая
       34

Получить (значение + 1) в цикле @each с несколькими значениями

0 голосов
/ 11 ноября 2018

Чтобы выполнить мой CSS, я использую инфраструктуру SCSS inuitcss (https://github.com/inuitcss/inuitcss),, которая предоставляет утилиты для отзывчивых интервалов, которые выглядят так: 

.u-1/3@mobile
.u-margin-bottom@mobile

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

.u-1/2@tablet
.u-margin-bottom-none@tablet

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

В настоящее время миксин, отвечающий за генерацию этих служебных классов, выглядит следующим образом (он использует Sass-mq): 

@each $inuit-bp-name, $inuit-bp-value in $mq-breakpoints {  
  @include mq($from: $inuit-bp-name) {
    @include inuit-widths($inuit-fractions, #{$inuit-widths-breakpoint-separator}#{$inuit-bp-name});
  }
}

Чтобы достичь своей цели, мне пришлось бы адаптировать функцию @include mq( для использования второго параметра, который будет выглядеть следующим образом: 

@include mq($from: $inuit-bp-name, $to: [next $inuit-bp-name]) {

А вот мои проблемы:

  1. Как получить следующее значение на карте?

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

Мне по крайней мере удалось получить значение индекса, например: 

@each $inuit-bp-name, $inuit-bp-value in $mq-breakpoints {  
  $i: index(($mq-breakpoints), ($inuit-bp-name $inuit-bp-value));
  @debug "INDEX" $i;
}

Для более простого тестирования я подготовил кодовую ручку с этим кодом, который можно найти здесь: https://codepen.io/rowild/pen/EOgvKy

1 Ответ

0 голосов
/ 15 ноября 2018

Поскольку в настоящее время невозможно связать Inuitcss изнутри codepen (также нет CDN), мне сначала пришлось подготовить github-репозиторий, который позаботится об этом, используя страницы github. Пожалуйста, найдите его здесь, если вы хотите быстро реализовать inuitcss в codepen, jsFiddle и т. Д. (Включая классы «ограниченный интервал ответа» и другие):

https://github.com/rowild/inuitcss-generated

Пример codepen, который показывает, как включить inuitcss в codepen, можно найти здесь:

https://codepen.io/rowild/pen/YRVvRe

Что касается функции SCSS, которая генерирует классы с «ограниченным отзывчивым интервалом» (как я их сейчас называю), я сделал следующее:

В бесконечном цикле новая переменная $next содержит значение next карты.

  • Если это значение не равно нулю, создайте медиазапрос и класс с суффикс "-only".
  • Если значение ложно, ничего не делать (потому что регулярные классы промежутков inuitcss уже охватывают этот сценарий; я тем не менее, оставил здесь закомментированный код, возможно, он служит цель ...):

Новая функция выглядит так: 

//scss
@if ($inuit-restricted-responsive-spacing-properties != null) {
  @each $property-namespace, $property in $inuit-restricted-responsive-spacing-properties {
    @each $direction-namespace, $direction-rules in $inuit-restricted-responsive-spacing-directions {
      @each $size-namespace, $size in $inuit-restricted-responsive-spacing-sizes {
    @each $inuit-bp-name, $inuit-bp-value in $mq-breakpoints {

      // Check, if the next breakpoint exists; if not, do not generate any classes.
      // Add a '-only' suffix (could probably be made configurable via a variable...)
      $next: map-get-next($mq-breakpoints, $inuit-bp-name, null);

      @if ($next) {
        @include mq($from: $inuit-bp-name, $until: map-get-next($mq-breakpoints, $inuit-bp-name, null)) {
          .u-#{$property-namespace}#{$direction-namespace}#{$size-namespace}#{$inuit-widths-breakpoint-separator}#{$inuit-bp-name}-only {
            @each $direction in $direction-rules {
              #{$property}#{$direction}: $size !important;
            }
          }
        }
      }

      // Not necessary, because this os covered by the regular inuitcss classes already
      // @else {
      //  @include mq($from: $inuit-bp-name) {
      //    .u-#{$property-namespace}#{$direction-namespace}#{$size-namespace}#{$inuit-widths-breakpoint-separator}#{$inuit-bp-name} {
      //      @each $direction in $direction-rules {
      //        #{$property}#{$direction}: $size !important;
      //      }
      //    }
      //  }
      // }
      }
    }
  }
}

Спасибо, ReSedano !

...