Question

我有一个运行Bootstrap 3.3.7的站点。我用less来调整造型。在引导版本4中引入了sass而不是更少，我注意到一个新的mixin，它增加了轻松使用预定义填充和边距的能力：

// Width

.w-100 { width: 100% !important; }

// Margin and Padding

.m-x-auto {
  margin-right: auto !important;
  margin-left:  auto !important;
}

@each $prop, $abbrev in (margin: m, padding: p) {
  @each $size, $lengths in $spacers {
    $length-x:   map-get($lengths, x);
    $length-y:   map-get($lengths, y);

    .#{$abbrev}-a-#{$size} { #{$prop}:        $length-y $length-x !important; } // a = All sides
    .#{$abbrev}-t-#{$size} { #{$prop}-top:    $length-y !important; }
    .#{$abbrev}-r-#{$size} { #{$prop}-right:  $length-x !important; }
    .#{$abbrev}-b-#{$size} { #{$prop}-bottom: $length-y !important; }
    .#{$abbrev}-l-#{$size} { #{$prop}-left:   $length-x !important; }

    // Axes
    .#{$abbrev}-x-#{$size} {
      #{$prop}-right:  $length-x !important;
      #{$prop}-left:   $length-x !important;
    }
    .#{$abbrev}-y-#{$size} {
      #{$prop}-top:    $length-y !important;
      #{$prop}-bottom: $length-y !important;
    }
  }
}

// Positioning

.pos-f-t {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: $zindex-navbar-fixed;
}

Source at GitHub

我想将这个mixin转换为更少，并在我自己的Bootstrap 3.3.7项目中使用它。这个mixin怎么样会更少？

Answer 1

Less没有任何@each函数或map像Sass那样，但即便将Sass代码转换为Less等价也相当容易。所需要的只是几个循环，每个循环都将模仿Sass和关联数组中的两个@each函数。

在Less中，我们可以同时使用逗号和空间作为值的分隔符。因此，通过使用它们，我们可以实现类似于地图的行为。甚至可以使用此模拟多层地图。

（注意：您需要了解Less循环的基础知识才能理解此代码，但由于您已经使用了Less，我认为您熟悉这些概念。如果没有，看看文档）

@props: margin m, padding p; /* the property and abbreviation */
@spacers: xs 10px 20px, md 20px 30px; /* the sizes, its length-x and length-y */

.loop-props(@prop-index) when (@prop-index > 0){ /* outer each loop */

  @prop: extract(@props, @prop-index); /* get each prop-abbrev pair based on loop index */
  @prop-name: extract(@prop, 1); /* the first value in each pair is the prop name */
  @abbrev: extract(@prop, 2); /* the second value in each pair is the prop's abbrev */

  /* call size loop mixin with each property name + abbreviation */
  .loop-sizes(@prop-name; @abbrev; length(@spacers)); 

  .loop-props(@prop-index - 1); /* call the next iteration of the outer each loop */
}
.loop-props(length(@props)) !important; /* initial mixin/loop call */

.loop-sizes(@prop-name; @abbrev; @size-index) when (@size-index > 0){ /* inner each */

  @spacer: extract(@spacers, @size-index); /* extract each spacer value based on index */
  @size: extract(@spacer, 1); /* first value in each spacer is the size */
  @x: extract(@spacer, 2); /* second value is the length in X axis */
  @y: extract(@spacer, 3); /* third value is the length in Y axis */

  /* create the selectors and properties using interpolation */
  .@{abbrev}-a-@{size} { 
    @{prop-name}: @y @x; 
  }
  .@{abbrev}-t-@{size} { 
    @{prop-name}-top: @y; 
  }
  .@{abbrev}-r-@{size} { 
    @{prop-name}-right: @x; 
  }
  .@{abbrev}-b-@{size} { 
    @{prop-name}-bottom: @y; 
  }
  .@{abbrev}-l-@{size} { 
    @{prop-name}-left: @x; 
  }
  .@{abbrev}-x-@{size} { 
    @{prop-name}-right: @x; 
    @{prop-name}-left: @x; 
  }
  .@{abbrev}-y-@{size} { 
    @{prop-name}-top: @y; 
    @{prop-name}-bottom: @y; 
  }

  .loop-sizes(@prop-name; @abbrev; @size-index - 1); /* call next iteration */
}

正如您已经注意到的那样，我已将!important附加到mixin调用本身，而不是将每个属性附加到它。完成后，Less编译器会自动将!important附加到每个属性，因此我们不需要重复它。

Bootstrap将间距mixin从sass转换为less

1 个答案: