将 LESS "when" 语句转换为 SCSS 条件语句

Question

为了引用我的消息来源，我正在转换来自 Metro-UI into a custom SCSS/Angular project I'm building. So far I've been able to convert much of it 1:1 by watching for mixins, includes, and variables. However, I'm not following what Metro's team is doing in this section when it comes to column arrangement. Their original code (from their LESS file - 第 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);
    }
}

当然是 "when" 语句导致了问题。我从类似的问题中了解到我可能需要使用 "for" 或 "each" 语句并从那里分解它，但是当我查看类似的答案时语法规则是非常不同的逻辑（比如 ).因为我没有编写原始的 LESS 语法，所以我试图通过他们的逻辑向后工作以确定它的 SCSS 等价物。

据我所知，它正在尝试确定如何展开网格 if/when I 和 K 的两个值不同，但由于您无法创建新的 class 基于在 SCSS 中的一个条件变量上，我被绊倒了。我将不胜感激任何指导。这是我无法编译的代码的最后一部分。

Answer 1

LESS 和 SCSS 在语法方面有点不同——我总是发现 SCSS 是更好的选择——为什么我对 LESS 的了解有些有限。

我运行 codepen 上的 LESS 代码并查看了输出 – 我想我可以在前两部分为您提供帮助。媒体查询的最后一部分没有任何意义，它只会产生一堆媒体查询并且类做与大小部分相同的事情...... （让我知道你是否能产生一些有意义的东西 - 然后我会再看一眼）。

我希望评论有意义:-)

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);

将 LESS "when" 语句转换为 SCSS 条件语句

Converting LESS "when" statements into SCSS conditional statements

sass

less

metro-ui-css

scss-mixins