bootstrap scss 自定义{property}{sides}-{breakpoint}-{size}

在Bootstrap SASS中，自定义CSS属性（如`margin`, `padding`, 等）通常是通过混合（mixins）来实现的，特别是对于媒体查询（media queries）下的不同屏幕尺寸（breakpoints）。`{property}`-`{sides}-{breakpoint}-{size}`这种结构代表了对特定设备视口大小的特定方向（如`top`, `right`, `bottom`, `left`）的某个属性设置。

例如，如果你想为所有设备的顶部和底部元素添加一个在小屏幕（`xs`）下为4px的内边距，你可以这样做：

// 定义一个名为custom-padding的混合
@mixin custom-padding($breakpoint: xs, $direction: vertical, $size: 4px) {
  @if $breakpoint == 'xs' {
    #{map-get($breakpoint-specific-properties, $direction)}: $size;
  }
}

// 使用这个混合，指定xs breakpoint和vertical sides
.container {
  @include custom-padding(xs, top, 4px);
  @include custom-padding(xs, bottom, 4px);
}

// 可选的，如果需要为其他breakpoint和side定义不同尺寸
@include custom-padding(sm, left, 6px); // 在small breakpoint下设置左侧内边距为6px

这里`$breakpoint-specific-properties`是一个预设的SASS地图，存储了各个断点对应的CSS属性值。