Question

要引用我的资料，我正在将图块功能从Metro-UI转换为我正在构建的自定义SCSS / Angular项目。到目前为止，通过监视混合，包含和变量，我已经能够将其中的大部分比例进行1：1转换。但是，在列安排方面，我没有关注Metro团队在本节中所做的工作。他们的原始代码（来自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);
    }
}

导致问题的当然是“时间”语句。我从类似的问题中了解到，我可能需要使用“ for”或“ each”语句并从那里分解，但是当我查看类似的答案时，语法规则是非常不同的逻辑（例如this one）。由于我没有编写原始的LESS语法，因此我尝试通过它们的逻辑来确定其SCSS等效项。

据我所知，它试图确定如果/当I和K的两个值不同时如何分散网格，但是由于您无法基于SCSS中的条件变量创建新类，因此我被绊倒了。我将不胜感激。这是我的代码的最后一部分，不会编译。

Answer 1

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

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

我希望评论有意义：-）

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“何时”语句转换为SCSS条件语句

1 个答案: