Bootstrap 将间距 mixin 从 sass 转换为 less

Question

我有一个运行 Bootstrap 3.3.7 的站点。我用 less 来调整样式。在 Bootstrap 的第 4 版中，引入了 sass 而不是 less，我注意到一个新的 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 转换为 less，并在我自己的 Bootstrap 3.3.7 项目中使用它。这个 mixin 在 less 中会是什么样子？

Answer 1

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

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

(注意：您需要了解 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 附加到每个属性，因此我们无需重复。