如何在我自己的自定义 SASS 类中混合 Twitter Bootstrap 实用程序类？答案

【问题标题】：How to mixin a Twitter Bootstrap utility class in my own custom SASS classes?如何在我自己的自定义 SASS 类中混合 Twitter Bootstrap 实用程序类？
【发布时间】：2019-10-14 16:50:54
【问题描述】：

我有一个用 SASS 编写的自定义类：

.my-custom-container {
    background-color: red;
    padding: 1.5rem;
}

我想混入 Bootstrap 的 .p2 实用程序类，例如：

.my-customer-container {
    background-color: red;
    @mixin(p2);
}

这可能吗？

【问题讨论】：

标签： twitter-bootstrap sass utility

【解决方案1】：

没有mixins可以这样做，因为bootstrap的间距文件是这样的：

// stylelint-disable declaration-no-important

// Margin and Padding

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    @each $prop, $abbrev in (margin: m, padding: p) {
      @each $size, $length in $spacers {

        .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
        .#{$abbrev}t#{$infix}-#{$size},
        .#{$abbrev}y#{$infix}-#{$size} {
         #{$prop}-top: $length !important;
        }
        .#{$abbrev}r#{$infix}-#{$size},
        .#{$abbrev}x#{$infix}-#{$size} {
         #{$prop}-right: $length !important;
        }
        .#{$abbrev}b#{$infix}-#{$size},
        .#{$abbrev}y#{$infix}-#{$size} {
         #{$prop}-bottom: $length !important;
        }
        .#{$abbrev}l#{$infix}-#{$size},
        .#{$abbrev}x#{$infix}-#{$size} {
          #{$prop}-left: $length !important;
        }
      }
    }
    // Some special margin utils
    .m#{$infix}-auto { margin: auto !important; }
    .mt#{$infix}-auto,
    .my#{$infix}-auto {
      margin-top: auto !important;
    }
    .mr#{$infix}-auto,
    .mx#{$infix}-auto {
      margin-right: auto !important;
    }
    .mb#{$infix}-auto,
    .my#{$infix}-auto {
      margin-bottom: auto !important;
    }
    .ml#{$infix}-auto,
    .mx#{$infix}-auto {
      margin-left: auto !important;
    }
  }
}

你可以看到 Bootstrap 直接生成它的填充类并且不使用任何 mixin，所以你不能重用它们。您应该编写自己的填充 mixins 或简单地使用 $spacer 变量。

.myClass {
    margin-top: $spacer*0.5;
}

【讨论】：