0

引用我的资料，我正在将Metro-UI中的磁贴功能转换为我正在构建的自定义 SCSS/Angular 项目。到目前为止，我已经能够通过查看 mixins、include 和变量来将其中的大部分转换为 1:1。但是，在列排列方面，我并没有关注 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);
    }
}

这当然是导致问题的“何时”声明。我从类似的问题中了解到，我可能需要使用“for”或“each”语句并从那里分解，但是当我查看类似的答案时，语法规则是非常不同的逻辑（比如这个）。由于我没有编写原始 LESS 语法，因此我试图通过他们的逻辑向后工作以确定其 SCSS 等效项。

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

4

1 回答 1

0

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);
于 2018-12-27T23:59:37.080 回答