Преобразование операторов LESS «когда» в условные операторы SCSS

Question

Чтобы процитировать мои источники, я конвертирую функциональность плиток из Metro-UI в пользовательский проект SCSS / Angular, который я строю.До сих пор я был в состоянии преобразовать большую часть этого 1: 1, наблюдая за mixins, include и переменными.Тем не менее, я не слежу за тем, что команда Metro делает в этом разделе, когда дело доходит до расстановки колонок.Их исходный код (из их LESS-файла - строка 243):

.tiles-grid {
    .create-tiles-cells(@i: 1, @k: 1) when (@k <= @i) {

        .tile-small.col-@{k} {
            grid-column: @k / span 1;
        }

        .tile-medium.col-@{k} {
            grid-column: @k / span 2;
        }

        .tile-wide.col-@{k} {
            grid-column: @k / span 4;
        }

        .tile-large.col-@{k} {
            grid-column: @k / span 4;
        }

        .tile-small.row-@{k} {
            grid-row: @k / span 1;
        }

        .tile-medium.row-@{k} {
            grid-row: @k / span 2;
        }

        .tile-wide.row-@{k} {
            grid-row: @k / span 4;
        }

        .tile-large.row-@{k} {
            grid-row: @k / span 4;
        }


        //.col-@{k} {
        //    grid-column: @k;
        //}
        //.row-@{k} {
        //    grid-row: @k;
        //}
        .create-tiles-cells(@i; @k + 1);
    }
    .create-tiles-cells(12);
}

.tiles-grid {
    &.size-half {
        width: 70px + @tileMargin * 2;
    }

    .create-tiles-grid-size(@i: 1, @k: 1) when (@k <= @i) {
        &.size-@{k} {
            width: (@tileCellSize + @tileMargin * 2) * @k;
        }

        .create-tiles-grid-size(@i; @k + 1);
    }
    .create-tiles-grid-size(10);
}

.tiles-grid {

    .generate-tiles-media-options(@mediaBreakpointListMobileLength);
    .generate-tiles-media-options(@name, @j: 1) when (@j <= @mediaBreakpointListMobileLength) {
        @m: extract(@mediaBreakpointListMobile, @j);

        @media screen and (min-width: @@m) {
            .create-tiles-cells(@i: 1, @k: 1) when (@k <= @i) {
                .col-@{m}-@{k} {
                    grid-column: @k;
                }
                .row-@{m}-@{k} {
                    grid-row: @k;
                }
                .create-tiles-cells(@i; @k + 1);
            }
            .create-tiles-cells(12);

            .create-tiles-grid-size(@i: 1, @k: 1) when (@k <= @i) {
                &.size-@{m}-half {
                    width: 70px + @tileMargin * 2;
                }
                &.size-@{m}-@{k} {
                    width: (@tileCellSize + @tileMargin * 2) * @k;
                }

                .create-tiles-grid-size(@i; @k + 1);
            }
            .create-tiles-grid-size(10);
        }

        .generate-tiles-media-options(@name, @j + 1);
    }
}

Мое преобразование на данный момент:

.tiles-grid {
    @mixin create-tiles-cells($i: 1, $k: 1) when ($k <= $i){

        .tile-small.col-#{$k} {
            grid-column: $k / span 1;
        }

        .tile-medium.col-#{$k} {
            grid-column: $k / span 2;
        }

        .tile-wide.col-#{$k} {
            grid-column: $k / span 4;
        }

        .tile-large.col-#{$k} {
            grid-column: $k / span 4;
        }

        .tile-small.row-#{$k} {
            grid-row: $k / span 1;
        }

        .tile-medium.row-#{$k} {
            grid-row: $k / span 2;
        }

        .tile-wide.row-#{$k} {
            grid-row: $k / span 4;
        }

        .tile-large.row-#{$k} {
            grid-row: $k / span 4;
        }


        //.col-${k} {
        //    grid-column: $k;
        //}
        //.row-${k} {
        //    grid-row: $k;
        //}
        @include create-tiles-cells($i, $k + 1);
    }
    @include create-tiles-cells(12);
}

.tiles-grid {
    &.size-half {
        width: 70px + $tileMargin * 2;
    }

    @mixin create-tiles-grid-size($i: 1, $k: 1) when ($k <= $i){
        &.size-#{$k} {
            width: ($tileCellSize + $tileMargin * 2) * $k;
        }

        @include create-tiles-grid-size($i, $k + 1);
    }
    @include create-tiles-grid-size(10);
}

.tiles-grid {

    @include generate-tiles-media-options($mediaBreakpointListMobileLength);
    @mixin generate-tiles-media-options($name, $j: 1) when ($j <= $mediaBreakpointListMobileLength){
        $m: extract($mediaBreakpointListMobile, $j);

        @media screen and (min-width: $m) {
            @mixin create-tiles-cells($i: 1, $k: 1) when ($k <= $i){
                .col-#{$m}-#{$k} {
                    grid-column: $k;
                }
                .row-#{$m}-#{$k} {
                    grid-row: $k;
                }
                @include create-tiles-cells($i, $k + 1);
            }
            @include create-tiles-cells(12);

            @mixin create-tiles-grid-size($i: 1, $k: 1) when ($k <= $i){
                &.size-#{$m}-half {
                    width: 70px + $tileMargin * 2;
                }
                &.size-#{$m}-#{$k} {
                    width: ($tileCellSize + $tileMargin * 2) * $k;
                }

                @include create-tiles-grid-size($i, $k + 1);
            }
            @include create-tiles-grid-size(10);
        }

        @include generate-tiles-media-options($name, $j + 1);
    }
}

Это, конечно, выражение "когда"это вызывает проблему.Из похожих вопросов я понимаю, что мне может понадобиться использовать оператор «для» или «каждый» и разбить его оттуда, но правила синтаксиса сильно отличаются от логики, когда я рассматриваю похожие ответы (например, этот ).Поскольку я не писал оригинальный синтаксис LESS, я пытаюсь работать в обратном направлении через их логику, чтобы определить его эквивалент SCSS.

Из того, что я могу сказать, он пытается определить, как распределить сетки, если / когдадва значения для I и K различны, но, поскольку вы не можете создать новый класс на основе условной переменной в SCSS, меня сбивают с толку.Буду признателен за любые рекомендации.Это последняя часть моего кода, которая не будет компилироваться.

Answer 1

LESS и SCSS немного отличаются, когда дело доходит до синтаксиса - я всегда считал SCSS лучшим выбором - почему мои знания по LESS несколько ограничены.

Я запускал код LESS на codepen и посмотрел на вывод - я думаю, что смогу помочь вам с первыми двумя частями.Последняя часть с медиа-запросами не имеет смысла, она просто создает кучу медиа-запросов и классов, выполняющих ту же функцию, что и размерная часть ... (дайте мне знать, если вы можете создать что-то значимое - тогда я посмотрю второй раз).

Надеюсь, комментарии имеют смысл: -)

Код sassmeister.com

// -------------------------------------------------------
//  Create tile cells mixin
//  if no arguments are passed 12 will be used as default
//  small note! mixins can't be nested in selectors
// -------------------------------------------------------
@mixin create-tiles-cells($count: 12){
  //  map holding size information (think object like)
  $sizes:(small: 1, medium: 2, wide: 3, large: 4);

  //  outer selector 
  .tiles-grid {
    //  loop from 1 through cell count
    @for $i from 1 through $count {
      //  loop through sizes map
      @each $key, $value in $sizes {
        //  print class using $key (small, medium,...)
        .tile-#{$key} {
          //  use & to bind the .col and .row class to the parent .tile-xxx  
          &.col-#{$i} { grid-column: $i / span $value; }
          &.row-#{$i} { grid-row:    $i / span $value; }
        }
      }
    }  
  }
}


// -------------------------------------------------------
//  Create tile sizes mixin
//  if no arguments are passed 10 will be used as default
// -------------------------------------------------------
@mixin create-tiles-grid-size($count: 10){
  //  variables 
  $tile-margin: 5px;
  $tile-cell-size: 150px;

  // @tileMargin: 5px;
  .tiles-grid {  
    //  hardcoded half class 
    &.size-half { width: 70px + $tile-margin * 2;}
    //  loop from 1 through size count
    @for $i from 1 through $count {
      &.size-#{$i}{ 
        width: ($tile-cell-size + $tile-margin * 2) * $i; 
      }
    }
  }
}


// -------------------------------------------------------
// Include the mixins 
// -------------------------------------------------------
@include create-tiles-cells(12);
@include create-tiles-grid-size(10);