Twitter bootstrap 如何在我自己的自定义SASS类中混合Twitter引导实用程序类?

Twitter bootstrap 如何在我自己的自定义SASS类中混合Twitter引导实用程序类?,twitter-bootstrap,sass,utility,Twitter Bootstrap,Sass,Utility,我有一个用SASS编写的自定义类: .my-custom-container { background-color: red; padding: 1.5rem; } 我想混合Bootstrap的.p2实用程序类,类似于: .my-customer-container { background-color: red; @mixin(p2); } 这是可能的吗?因为引导的间隔文件如下所示,所以没有混入操作: // stylelint-disable declara

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

.my-custom-container {
    background-color: red;
    padding: 1.5rem;
}
我想混合Bootstrap的
.p2
实用程序类,类似于:

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

这是可能的吗?

因为引导的间隔文件如下所示,所以没有混入操作:

// 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;
    }
  }
}
您可以看到引导程序直接生成它的填充类,并且不使用任何mixin,所以您不能重用它们。 您应该编写自己的padding mixin,或者只使用$spacer变量

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

由于引导的间距文件如下所示,因此不存在要执行此操作的混合:

// 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;
    }
  }
}
您可以看到引导程序直接生成它的填充类,并且不使用任何mixin,所以您不能重用它们。 您应该编写自己的padding mixin,或者只使用$spacer变量

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