色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

使用each()函數生成動態類名時,解析錯誤更少

林玟書2年前8瀏覽0評論

我嘗試使用each()函數和LESS中的字符串插值來生成動態CSS類名。

我嘗試了以下代碼:

@spacing-sizes: 0 0.25 0.5 1 1.5 3;
@breakpoints: '' 'sm' 'md' 'lg' 'xl' 'xxl';
@breakpoint-widths: 0px 576px 768px 992px 1200px 1400px;

.generate-classes(@prefix, @size, @value) {
  .loop-breakpoints(@index: length(@breakpoints)) when (@index > 0) {
    @breakpoint: e(extract(@breakpoints, @index));
    @width: extract(@breakpoint-widths, @index);
    @class-name: ~"@{prefix}-@{size}@{breakpoint}";

    & when (default(@breakpoint)) {
      @{class-name} { @prefix: unit(@value, rem) !important; }
    } 
    & when not (default(@breakpoint)) {
      @media (min-width: @width) { @{class-name} { @prefix: unit(@value, rem) !important; } }
    }
    .loop-breakpoints(@index - 1);
  }
  .loop-breakpoints();
}

.generate-sizes(@index, @size) when (@index > -1) {
  .generate-classes("m", @index, @size);
  .generate-classes("mt", @index, @size);
  .generate-classes("mb", @index, @size);
  .generate-classes("ml", @index, @size);
  .generate-classes("mr", @index, @size);
  .generate-classes("mx", @index, @size);
  .generate-classes("my", @index, @size);

  .generate-classes("p", @index, @size);
  .generate-classes("pt", @index, @size);
  .generate-classes("pb", @index, @size);
  .generate-classes("pl", @index, @size);
  .generate-classes("pr", @index, @size);
  .generate-classes("px", @index, @size);
  .generate-classes("py", @index, @size);

  .generate-sizes(@index - 1, @size);
}

.each(@spacing-sizes, .(@value, @index) {
  .generate-sizes(@index - 1, @value);
});

但是,我遇到了一個解析錯誤,這個錯誤不是很好描述:

致命錯誤:分析錯誤:在處失敗);第44行

我嘗試了不同的方法,比如嘗試如下不同的語法:

each(@spacing-sizes, {
  .generate-sizes(@index - 1, @value);
});

,但我仍然得到同樣的錯誤。