补充 utilities

scss/_utilities.scss

@@ -33,6 +33,16 @@
 @import './utilities/grid/row-start-end';
 @import './utilities/grid/rows';
 
+@import './utilities/box-alignment/align-content';
+@import './utilities/box-alignment/align-items';
+@import './utilities/box-alignment/align-self';
+@import './utilities/box-alignment/justify-content';
+@import './utilities/box-alignment/justify-items';
+@import './utilities/box-alignment/justify-self';
+@import './utilities/box-alignment/place-content';
+@import './utilities/box-alignment/place-items';
+@import './utilities/box-alignment/place-self';
+
 @import './utilities/spacing/margin';
 @import './utilities/spacing/padding';
 @import './utilities/spacing/space-between';
@@ -40,28 +50,16 @@
 @import './utilities/sizing/width';
 @import './utilities/sizing/height';
 
+@import './utilities/typography/font-size';
+@import './utilities/typography/font-weight';
+@import './utilities/typography/line-height';
+@import './utilities/typography/text-align';
 @import './utilities/typography/text-color';
 
 .clearfix {
   @include clearfix();
 }
 
-.pos-rlt {
-  position: relative;
-}
-
-.pos-stc {
-  position: static !important;
-}
-
-.pos-abt {
-  position: absolute;
-}
-
-.pos-fix {
-  position: fixed;
-}
-
 .show {
   visibility: visible;
 }
@@ -119,26 +117,6 @@
   border-radius: 0;
 }
 
-.block {
-  display: block;
-}
-
-.block.hide {
-  display: none;
-}
-
-.inline {
-  display: inline-block !important;
-}
-
-.none {
-  display: none;
-}
-
-.pull-none {
-  float: none;
-}
-
 .rounded {
   border-radius: 500px;
 }
@@ -197,50 +175,6 @@
   font-weight: 700;
 }
 
-.text-5x {
-  font-size: 5em;
-}
-
-.text-4x {
-  font-size: 4em;
-}
-
-.text-3x {
-  font-size: 3em;
-}
-
-.text-2x {
-  font-size: 2em;
-}
-
-.text-xl {
-  font-size: $fontSizeXl !important;
-}
-
-.text-lg {
-  font-size: $fontSizeLg !important;
-}
-
-.text-md {
-  font-size: $fontSizeMd !important;
-}
-
-.text-base {
-  font-size: $fontSizeBase !important;
-}
-
-.text-sm {
-  font-size: $fontSizeSm !important;
-}
-
-.text-xs {
-  font-size: $fontSizeXs !important;
-}
-
-.text-xxs {
-  text-indent: -9999px;
-}
-
 .text-ellipsis {
   display: block;
   white-space: nowrap;
@@ -966,6 +900,7 @@ a.label {
   @include label-variant($label--danger-bg);
 }
 
+// js 功能依赖这个
 @keyframes apearSensor {
   from {
     opacity: 0;

scss/_variables.scss

@@ -334,6 +334,22 @@ $maxHeights: map-merge(
   )
 ) !default;
 
+$fontSizes: (
+  xs: 0.75rem 1rem,
+  sm: 0.875rem 1.25rem,
+  base: 1rem 1.5rem,
+  md: 1.125rem 1.75rem,
+  lg: 1.25rem 1.75rem,
+  xl: 1.5rem 2rem,
+  2xl: 1.875rem 2.25rem,
+  3xl: 2.25rem 2.5rem,
+  4xl: 3rem 1,
+  5xl: 3.75rem 1,
+  6xl: 4.5rem 1,
+  7xl: 6rem 1,
+  8xl: 8rem 1
+) !default;
+
 // 字体相关
 $fontFamilySansSerif: -apple-system, BlinkMacSystemFont, 'SF Pro SC',
   'SF Pro Text', 'Helvetica Neue', Helvetica, 'PingFang SC', 'Segoe UI', Roboto,

scss/utilities/box-alignment/_align-content.scss

@@ -0,0 +1,27 @@
+@mixin make-align-content($prefix: '.') {
+  #{$prefix}content-center {
+    align-content: center;
+  }
+  #{$prefix}content-start {
+    align-content: flex-start;
+  }
+  #{$prefix}content-end {
+    align-content: flex-end;
+  }
+  #{$prefix}content-between {
+    align-content: space-between;
+  }
+  #{$prefix}content-around {
+    align-content: space-around;
+  }
+  #{$prefix}content-evenly {
+    align-content: space-evenly;
+  }
+}
+
+@include make-align-content();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-align-content('.' + selector-escape($deivce + ':'));
+  }
+}

scss/utilities/box-alignment/_align-items.scss

@@ -0,0 +1,24 @@
+@mixin make-align-items($prefix: '.') {
+  #{$prefix}items-start {
+    align-items: flex-start;
+  }
+  #{$prefix}items-end {
+    align-items: flex-end;
+  }
+  #{$prefix}items-center {
+    align-items: center;
+  }
+  #{$prefix}items-baseline {
+    align-items: baseline;
+  }
+  #{$prefix}items-stretch {
+    align-items: stretch;
+  }
+}
+
+@include make-align-items();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-align-items('.' + selector-escape($deivce + ':'));
+  }
+}

scss/utilities/box-alignment/_align-self.scss

@@ -0,0 +1,24 @@
+@mixin make-align-self($prefix: '.') {
+  #{$prefix}self-auto {
+    align-self: auto;
+  }
+  #{$prefix}self-start {
+    align-self: flex-start;
+  }
+  #{$prefix}self-end {
+    align-self: flex-end;
+  }
+  #{$prefix}self-center {
+    align-self: center;
+  }
+  #{$prefix}self-stretch {
+    align-self: stretch;
+  }
+}
+
+@include make-align-self();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-align-self('.' + selector-escape($deivce + ':'));
+  }
+}

scss/utilities/box-alignment/_justify-content.scss

@@ -0,0 +1,27 @@
+@mixin make-justify-content($prefix: '.') {
+  #{$prefix}justify-start {
+    justify-content: flex-start;
+  }
+  #{$prefix}justify-end {
+    justify-content: flex-end;
+  }
+  #{$prefix}justify-center {
+    justify-content: center;
+  }
+  #{$prefix}justify-between {
+    justify-content: space-between;
+  }
+  #{$prefix}justify-around {
+    justify-content: space-around;
+  }
+  #{$prefix}justify-evenly {
+    justify-content: space-evenly;
+  }
+}
+
+@include make-justify-content();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-justify-content('.' + selector-escape($deivce + ':'));
+  }
+}

scss/utilities/box-alignment/_justify-items.scss

@@ -0,0 +1,24 @@
+@mixin make-justify-items($prefix: '.') {
+  #{$prefix}justify-items-auto {
+    justify-items: auto;
+  }
+  #{$prefix}justify-items-start {
+    justify-items: start;
+  }
+  #{$prefix}justify-items-end {
+    justify-items: end;
+  }
+  #{$prefix}justify-items-center {
+    justify-items: center;
+  }
+  #{$prefix}justify-items-stretch {
+    justify-items: stretch;
+  }
+}
+
+@include make-justify-items();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-justify-items('.' + selector-escape($deivce + ':'));
+  }
+}

scss/utilities/box-alignment/_justify-self.scss

@@ -0,0 +1,24 @@
+@mixin make-justify-self($prefix: '.') {
+  #{$prefix}justify-self-auto {
+    justify-self: auto;
+  }
+  #{$prefix}justify-self-start {
+    justify-self: start;
+  }
+  #{$prefix}justify-self-end {
+    justify-self: end;
+  }
+  #{$prefix}justify-self-center {
+    justify-self: center;
+  }
+  #{$prefix}justify-self-stretch {
+    justify-self: stretch;
+  }
+}
+
+@include make-justify-self();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-justify-self('.' + selector-escape($deivce + ':'));
+  }
+}

scss/utilities/box-alignment/_place-content.scss

@@ -0,0 +1,30 @@
+@mixin make-place-content($prefix: '.') {
+  #{$prefix}place-content-center {
+    place-content: center;
+  }
+  #{$prefix}place-content-start {
+    place-content: start;
+  }
+  #{$prefix}place-content-end {
+    place-content: end;
+  }
+  #{$prefix}place-content-between {
+    place-content: space-between;
+  }
+  #{$prefix}place-content-around {
+    place-content: space-around;
+  }
+  #{$prefix}place-content-evenly {
+    place-content: space-evenly;
+  }
+  #{$prefix}place-content-stretch {
+    place-content: stretch;
+  }
+}
+
+@include make-place-content();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-place-content('.' + selector-escape($deivce + ':'));
+  }
+}

scss/utilities/box-alignment/_place-items.scss

@@ -0,0 +1,24 @@
+@mixin make-place-items($prefix: '.') {
+  #{$prefix}place-items-auto {
+    place-items: auto;
+  }
+  #{$prefix}place-items-start {
+    place-items: start;
+  }
+  #{$prefix}place-items-end {
+    place-items: end;
+  }
+  #{$prefix}place-items-center {
+    place-items: center;
+  }
+  #{$prefix}place-items-stretch {
+    place-items: stretch;
+  }
+}
+
+@include make-place-items();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-place-items('.' + selector-escape($deivce + ':'));
+  }
+}

scss/utilities/box-alignment/_place-self.scss

@@ -0,0 +1,24 @@
+@mixin make-place-self($prefix: '.') {
+  #{$prefix}place-self-auto {
+    place-self: auto;
+  }
+  #{$prefix}place-self-start {
+    place-self: start;
+  }
+  #{$prefix}place-self-end {
+    place-self: end;
+  }
+  #{$prefix}place-self-center {
+    place-self: center;
+  }
+  #{$prefix}place-self-stretch {
+    place-self: stretch;
+  }
+}
+
+@include make-place-self();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-place-self('.' + selector-escape($deivce + ':'));
+  }
+}

scss/utilities/layout/_position.scss

@@ -13,6 +13,22 @@
       display: $value;
     }
   }
+
+  #{$prefix}pos-rlt {
+    position: relative;
+  }
+
+  #{$prefix}pos-stc {
+    position: static !important;
+  }
+
+  #{$prefix}pos-abt {
+    position: absolute;
+  }
+
+  #{$prefix}pos-fix {
+    position: fixed;
+  }
 }
 
 @include make-position();

scss/utilities/spacing/_margin.scss

@@ -1,40 +1,40 @@
-@mixin margin-spacing($spacing: $spacing, $prefix: '') {
+@mixin margin-spacing($spacing: $spacing, $prefix: '.', $suffix: '') {
   @each $name, $value in $spacing {
     @if $name == default {
-      #{$prefix}.m {
+      #{$prefix}m#{$suffix} {
         margin: $value;
       }
     } @else {
-      #{$prefix}.m-#{'' + selector-escape($name)} {
+      #{$prefix}m-#{'' + selector-escape($name)}#{$suffix} {
         margin: $value;
       }
     }
   }
 }
 
-@mixin margin-negative-spacing($spacing: $spacing, $prefix: '') {
+@mixin margin-negative-spacing($spacing: $spacing, $prefix: '.', $suffix: '') {
   @each $name, $value in $spacing {
     @if $name == default {
-      #{$prefix}.m-n {
+      #{$prefix}m-n#{$suffix} {
         margin: $value * -1;
       }
     } @else {
-      #{$prefix}.m-n-#{'' + selector-escape($name)} {
+      #{$prefix}m-n-#{'' + selector-escape($name)}#{$suffix} {
         margin: $value * -1;
       }
     }
   }
 }
 
-@mixin margin-x-spacing($spacing: $spacing, $prefix: '') {
+@mixin margin-x-spacing($spacing: $spacing, $prefix: '.', $suffix: '') {
   @each $name, $value in $spacing {
     @if $name == default {
-      #{$prefix}.m-x {
+      #{$prefix}m-x#{$suffix} {
         margin-left: $value;
         margin-right: $value;
       }
     } @else {
-      #{$prefix}.m-x-#{'' + selector-escape($name)} {
+      #{$prefix}m-x-#{'' + selector-escape($name)}#{$suffix} {
         margin-left: $value;
         margin-right: $value;
       }
@@ -42,15 +42,19 @@
   }
 }
 
-@mixin margin-negative-x-spacing($spacing: $spacing, $prefix: '') {
+@mixin margin-negative-x-spacing(
+  $spacing: $spacing,
+  $prefix: '.',
+  $suffix: ''
+) {
   @each $name, $value in $spacing {
     @if $name == default {
-      #{$prefix}.m-n-x {
+      #{$prefix}m-n-x#{$suffix} {
         margin-left: $value * -1;
         margin-right: $value * -1;
       }
     } @else {
-      #{$prefix}.m-n-x-#{'' + selector-escape($name)} {
+      #{$prefix}m-n-x-#{'' + selector-escape($name)}#{$suffix} {
         margin-left: $value * -1;
         margin-right: $value * -1;
       }
@@ -58,15 +62,15 @@
   }
 }
 
-@mixin margin-y-spacing($spacing: $spacing, $prefix: '') {
+@mixin margin-y-spacing($spacing: $spacing, $prefix: '.', $suffix: '') {
   @each $name, $value in $spacing {
     @if $name == default {
-      #{$prefix}.m-y {
+      #{$prefix}m-y#{$suffix} {
         margin-top: $value;
         margin-bottom: $value;
       }
     } @else {
-      #{$prefix}.m-y-#{'' + selector-escape($name)} {
+      #{$prefix}m-y-#{'' + selector-escape($name)}#{$suffix} {
         margin-top: $value;
         margin-bottom: $value;
       }
@@ -74,15 +78,19 @@
   }
 }
 
-@mixin margin-negative-y-spacing($spacing: $spacing, $prefix: '') {
+@mixin margin-negative-y-spacing(
+  $spacing: $spacing,
+  $prefix: '.',
+  $suffix: ''
+) {
   @each $name, $value in $spacing {
     @if $name == default {
-      #{$prefix}.m-n-y {
+      #{$prefix}m-n-y#{$suffix} {
         margin-top: $value * -1;
         margin-bottom: $value * -1;
       }
     } @else {
-      #{$prefix}.m-n-y-#{'' + selector-escape($name)} {
+      #{$prefix}m-n-y-#{'' + selector-escape($name)}#{$suffix} {
         margin-top: $value * -1;
         margin-bottom: $value * -1;
       }
@@ -90,132 +98,160 @@
   }
 }
 
-@mixin margin-top-spacing($spacing: $spacing, $prefix: '') {
+@mixin margin-top-spacing($spacing: $spacing, $prefix: '.', $suffix: '') {
   @each $name, $value in $spacing {
     @if $name == default {
-      #{$prefix}.m-t {
+      #{$prefix}m-t#{$suffix} {
         margin-top: $value;
       }
     } @else {
-      #{$prefix}.m-t-#{'' + selector-escape($name)} {
+      #{$prefix}m-t-#{'' + selector-escape($name)}#{$suffix} {
         margin-top: $value;
       }
     }
   }
 }
 
-@mixin margin-negative-top-spacing($spacing: $spacing, $prefix: '') {
+@mixin margin-negative-top-spacing(
+  $spacing: $spacing,
+  $prefix: '.',
+  $suffix: ''
+) {
   @each $name, $value in $spacing {
     @if $name == default {
-      #{$prefix}.m-n-t {
+      #{$prefix}m-n-t#{$suffix} {
         margin-top: $value * -1;
       }
     } @else {
-      #{$prefix}.m-n-t-#{'' + selector-escape($name)} {
+      #{$prefix}m-n-t-#{'' + selector-escape($name)}#{$suffix} {
         margin-top: $value * -1;
       }
     }
   }
 }
 
-@mixin margin-right-spacing($spacing: $spacing, $prefix: '') {
+@mixin margin-right-spacing($spacing: $spacing, $prefix: '.', $suffix: '') {
   @each $name, $value in $spacing {
     @if $name == default {
-      #{$prefix}.m-r {
+      #{$prefix}m-r#{$suffix} {
         margin-right: $value;
       }
     } @else {
-      #{$prefix}.m-r-#{'' + selector-escape($name)} {
+      #{$prefix}m-r-#{'' + selector-escape($name)}#{$suffix} {
         margin-right: $value;
       }
     }
   }
 }
 
-@mixin margin-negative-right-spacing($spacing: $spacing, $prefix: '') {
+@mixin margin-negative-right-spacing(
+  $spacing: $spacing,
+  $prefix: '.',
+  $suffix: ''
+) {
   @each $name, $value in $spacing {
     @if $name == default {
-      #{$prefix}.m-n-r {
+      #{$prefix}m-n-r#{$suffix} {
         margin-right: $value * -1;
       }
     } @else {
-      #{$prefix}.m-n-r-#{'' + selector-escape($name)} {
+      #{$prefix}m-n-r-#{'' + selector-escape($name)}#{$suffix} {
         margin-right: $value * -1;
       }
     }
   }
 }
 
-@mixin margin-bottom-spacing($spacing: $spacing, $prefix: '') {
+@mixin margin-bottom-spacing($spacing: $spacing, $prefix: '.', $suffix: '') {
   @each $name, $value in $spacing {
     @if $name == default {
-      #{$prefix}.m-b {
+      #{$prefix}m-b#{$suffix} {
         margin-bottom: $value;
       }
     } @else {
-      #{$prefix}.m-b-#{'' + selector-escape($name)} {
+      #{$prefix}m-b-#{'' + selector-escape($name)}#{$suffix} {
         margin-bottom: $value;
       }
     }
   }
 }
 
-@mixin margin-negative-bottom-spacing($spacing: $spacing, $prefix: '') {
+@mixin margin-negative-bottom-spacing(
+  $spacing: $spacing,
+  $prefix: '.',
+  $suffix: ''
+) {
   @each $name, $value in $spacing {
     @if $name == default {
-      #{$prefix}.m-n-b {
+      #{$prefix}m-n-b#{$suffix} {
         margin-bottom: $value * -1;
       }
     } @else {
-      #{$prefix}.m-n-b-#{'' + selector-escape($name)} {
+      #{$prefix}m-n-b-#{'' + selector-escape($name)}#{$suffix} {
         margin-bottom: $value * -1;
       }
     }
   }
 }
 
-@mixin margin-left-spacing($spacing: $spacing, $prefix: '') {
+@mixin margin-left-spacing($spacing: $spacing, $prefix: '.', $suffix: '') {
   @each $name, $value in $spacing {
     @if $name == default {
-      #{$prefix}.m-l {
+      #{$prefix}m-l#{$suffix} {
         margin-left: $value;
       }
     } @else {
-      #{$prefix}.m-l-#{'' + selector-escape($name)} {
+      #{$prefix}m-l-#{'' + selector-escape($name)}#{$suffix} {
         margin-left: $value;
       }
     }
   }
 }
 
-@mixin margin-negative-left-spacing($spacing: $spacing, $prefix: '') {
+@mixin margin-negative-left-spacing(
+  $spacing: $spacing,
+  $prefix: '.',
+  $suffix: ''
+) {
   @each $name, $value in $spacing {
     @if $name == default {
-      #{$prefix}.m-n-l {
+      #{$prefix}m-n-l#{$suffix} {
         margin-left: $value * -1;
       }
     } @else {
-      #{$prefix}.m-n-l-#{'' + selector-escape($name)} {
+      #{$prefix}m-n-l-#{'' + selector-escape($name)}#{$suffix} {
         margin-left: $value * -1;
       }
     }
   }
 }
 
-@include margin-spacing();
-@include margin-negative-spacing();
-@include margin-x-spacing();
-@include margin-negative-x-spacing();
-@include margin-y-spacing();
-@include margin-negative-y-spacing();
-@include margin-top-spacing();
-@include margin-negative-top-spacing();
-@include margin-right-spacing();
-@include margin-negative-right-spacing();
-@include margin-bottom-spacing();
-@include margin-negative-bottom-spacing();
-@include margin-left-spacing();
-@include margin-negative-left-spacing();
+@mixin make-margins($prefix: '.', $suffix: '') {
+  @include margin-spacing($spacing, $prefix, $suffix);
+  @include margin-negative-spacing($spacing, $prefix, $suffix);
+  @include margin-x-spacing($spacing, $prefix, $suffix);
+  @include margin-negative-x-spacing($spacing, $prefix, $suffix);
+  @include margin-y-spacing($spacing, $prefix, $suffix);
+  @include margin-negative-y-spacing($spacing, $prefix, $suffix);
+  @include margin-top-spacing($spacing, $prefix, $suffix);
+  @include margin-negative-top-spacing($spacing, $prefix, $suffix);
+  @include margin-right-spacing($spacing, $prefix, $suffix);
+  @include margin-negative-right-spacing($spacing, $prefix, $suffix);
+  @include margin-bottom-spacing($spacing, $prefix, $suffix);
+  @include margin-negative-bottom-spacing($spacing, $prefix, $suffix);
+  @include margin-left-spacing($spacing, $prefix, $suffix);
+  @include margin-negative-left-spacing($spacing, $prefix, $suffix);
+}
+
+@include make-margins();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-margins('.' + selector-escape($deivce + ':'));
+  }
+}
+
+// @include bg-colors('.' + selector-escape('hover:'), ':hover');
+// @include bg-colors('.group:hover .' + selector-escape('group-hover:'));
 
 // .m-xxs {
 //   margin: 2px 4px;

scss/utilities/spacing/_padding.scss

@@ -1,26 +1,26 @@
-@mixin padding-spacing($spacing: $spacing, $prefix: '') {
+@mixin padding-spacing($spacing: $spacing, $prefix: '.', $suffix: '') {
   @each $name, $value in $spacing {
     @if $name == default {
-      #{$prefix}.p {
+      #{$prefix}p#{$suffix} {
         padding: $value;
       }
     } @else {
-      #{$prefix}.p-#{'' + selector-escape($name)} {
+      #{$prefix}p-#{'' + selector-escape($name)}#{$suffix} {
         padding: $value;
       }
     }
   }
 }
 
-@mixin padding-x-spacing($spacing: $spacing, $prefix: '') {
+@mixin padding-x-spacing($spacing: $spacing, $prefix: '.', $suffix: '') {
   @each $name, $value in $spacing {
     @if $name == default {
-      #{$prefix}.p-x {
+      #{$prefix}p-x#{$suffix} {
         padding-left: $value;
         padding-right: $value;
       }
     } @else {
-      #{$prefix}.p-x-#{'' + selector-escape($name)} {
+      #{$prefix}p-x-#{'' + selector-escape($name)}#{$suffix} {
         padding-left: $value;
         padding-right: $value;
       }
@@ -28,15 +28,15 @@
   }
 }
 
-@mixin padding-y-spacing($spacing: $spacing, $prefix: '') {
+@mixin padding-y-spacing($spacing: $spacing, $prefix: '.', $suffix: '') {
   @each $name, $value in $spacing {
     @if $name == default {
-      #{$prefix}.p-y {
+      #{$prefix}p-y#{$suffix} {
         padding-top: $value;
         padding-bottom: $value;
       }
     } @else {
-      #{$prefix}.p-y-#{'' + selector-escape($name)} {
+      #{$prefix}p-y-#{'' + selector-escape($name)}#{$suffix} {
         padding-top: $value;
         padding-bottom: $value;
       }
@@ -44,69 +44,80 @@
   }
 }
 
-@mixin padding-top-spacing($spacing: $spacing, $prefix: '') {
+@mixin padding-top-spacing($spacing: $spacing, $prefix: '.', $suffix: '') {
   @each $name, $value in $spacing {
     @if $name == default {
-      #{$prefix}.p-t {
+      #{$prefix}p-t#{$suffix} {
         padding-top: $value;
       }
     } @else {
-      #{$prefix}.p-t-#{'' + selector-escape($name)} {
+      #{$prefix}p-t-#{'' + selector-escape($name)}#{$suffix} {
         padding-top: $value;
       }
     }
   }
 }
 
-@mixin padding-right-spacing($spacing: $spacing, $prefix: '') {
+@mixin padding-right-spacing($spacing: $spacing, $prefix: '.', $suffix: '') {
   @each $name, $value in $spacing {
     @if $name == default {
-      #{$prefix}.p-r {
+      #{$prefix}p-r#{$suffix} {
         padding-right: $value;
       }
     } @else {
-      #{$prefix}.p-r-#{'' + selector-escape($name)} {
+      #{$prefix}p-r-#{'' + selector-escape($name)}#{$suffix} {
         padding-right: $value;
       }
     }
   }
 }
 
-@mixin padding-bottom-spacing($spacing: $spacing, $prefix: '') {
+@mixin padding-bottom-spacing($spacing: $spacing, $prefix: '.', $suffix: '') {
   @each $name, $value in $spacing {
     @if $name == default {
-      #{$prefix}.p-b {
+      #{$prefix}p-b#{$suffix} {
         padding-bottom: $value;
       }
     } @else {
-      #{$prefix}.p-b-#{'' + selector-escape($name)} {
+      #{$prefix}p-b-#{'' + selector-escape($name)}#{$suffix} {
         padding-bottom: $value;
       }
     }
   }
 }
 
-@mixin padding-left-spacing($spacing: $spacing, $prefix: '') {
+@mixin padding-left-spacing($spacing: $spacing, $prefix: '.', $suffix: '') {
   @each $name, $value in $spacing {
     @if $name == default {
-      #{$prefix}.p-l {
+      #{$prefix}p-l#{$suffix} {
         padding-left: $value;
       }
     } @else {
-      #{$prefix}.p-l-#{'' + selector-escape($name)} {
+      #{$prefix}p-l-#{'' + selector-escape($name)}#{$suffix} {
         padding-left: $value;
       }
     }
   }
 }
 
-@include padding-spacing();
-@include padding-x-spacing();
-@include padding-y-spacing();
-@include padding-top-spacing();
-@include padding-right-spacing();
-@include padding-bottom-spacing();
-@include padding-left-spacing();
+@mixin make-padding($prefix: '.', $suffix: '') {
+  @include padding-spacing($spacing, $prefix, $suffix);
+  @include padding-x-spacing($spacing, $prefix, $suffix);
+  @include padding-y-spacing($spacing, $prefix, $suffix);
+  @include padding-top-spacing($spacing, $prefix, $suffix);
+  @include padding-right-spacing($spacing, $prefix, $suffix);
+  @include padding-bottom-spacing($spacing, $prefix, $suffix);
+  @include padding-left-spacing($spacing, $prefix, $suffix);
+}
+
+@include make-padding();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-padding('.' + selector-escape($deivce + ':'));
+  }
+}
+// @include bg-colors('.' + selector-escape('hover:'), ':hover');
+// @include bg-colors('.group:hover .' + selector-escape('group-hover:'));
 
 // 以下是原来的
 // .p-xxs {

scss/utilities/spacing/_space-between.scss

@@ -1,7 +1,7 @@
-@mixin space-x-spacing($spacing: $spacing, $prefix: '') {
+@mixin space-x-spacing($spacing: $spacing, $prefix: '.', $suffix: '') {
   @each $name, $value in $spacing {
     @if $name == default {
-      #{$prefix}.space-x {
+      #{$prefix}space-x#{$suffix} {
         & > :not([hidden]) ~ :not([hidden]) {
           margin-left: $value;
         }
@@ -11,7 +11,7 @@
         }
       }
     } @else {
-      #{$prefix}.space-x-#{'' + selector-escape($name)} {
+      #{$prefix}space-x-#{'' + selector-escape($name)}#{$suffix} {
         & > :not([hidden]) ~ :not([hidden]) {
           margin-left: $value;
         }
@@ -24,10 +24,10 @@
   }
 }
 
-@mixin space-y-spacing($spacing: $spacing, $prefix: '') {
+@mixin space-y-spacing($spacing: $spacing, $prefix: '.', $suffix: '') {
   @each $name, $value in $spacing {
     @if $name == default {
-      #{$prefix}.space-y {
+      #{$prefix}space-y#{$suffix} {
         & > :not([hidden]) ~ :not([hidden]) {
           margin-top: $value;
         }
@@ -37,7 +37,7 @@
         }
       }
     } @else {
-      #{$prefix}.space-y-#{'' + selector-escape($name)} {
+      #{$prefix}space-y-#{'' + selector-escape($name)}#{$suffix} {
         & > :not([hidden]) ~ :not([hidden]) {
           margin-top: $value;
         }
@@ -50,5 +50,14 @@
   }
 }
 
-@include space-x-spacing();
-@include space-y-spacing();
+@mixin make-spaces($prefix: '.', $suffix: '') {
+  @include space-x-spacing($spacing, $prefix, $suffix);
+  @include space-y-spacing($spacing, $prefix, $suffix);
+}
+
+@include make-spaces();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-spaces('.' + selector-escape($deivce + ':'));
+  }
+}

scss/utilities/typography/_font-size.scss

@@ -0,0 +1,15 @@
+@mixin make-font-size($prefix: '.', $suffix: '') {
+  @each $name, $values in $fontSizes {
+    #{$prefix}text-#{$name}#{$suffix} {
+      font-size: nth($values, 1);
+      line-height: nth($values, 2);
+    }
+  }
+}
+
+@include make-font-size();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-font-size('.' + selector-escape($deivce + ':'));
+  }
+}