sass/extra/_appearance.scss
.#{$prefix}border{
  border: $border-width solid $border-color;
}
@each $name in $direction {
  .#{$prefix}border-#{$name} {
    border-#{$name}: $border-width solid $border-color;
  }
}

.#{$prefix}border-radius {
  border-radius: $border-radius;
}
@each $name in $direction {
  .#{$prefix}border-#{$name}-radius {
    @if $name == top{
      border-top-right-radius: $border-radius;
      border-top-left-radius: $border-radius;
    }@else if $name == right{
      border-bottom-right-radius: $border-radius;
      border-top-right-radius: $border-radius;
    }@else if $name == bottom {
      border-bottom-right-radius: $border-radius;
      border-bottom-left-radius: $border-radius;
    }@else if $name == left{
      border-bottom-left-radius: $border-radius;
      border-top-left-radius: $border-radius;
    }
  }
}

// 按值定义
@each $value in $paddings {
  .#{$prefix}pd#{$value} {
    padding: $value + px;
  }
  // 按方向定义
  @each $name in $direction {
    .#{$prefix}pd#{$value}-#{$name} {
      padding-#{$name}: $value + px;
    }
  }
}

// 按值定义
@each $value in $margins {
  .#{$prefix}mg#{$value} {
    margin: $value + px;
  }
  // 按方向定义
  @each $name in $direction {
    .#{$prefix}mg#{$value}-#{$name} {
      margin-#{$name}: $value + px;
    }
  }
}