// 定义基础单位和最大类数  
$base-unit: 4px;  
$max-classes: 10;  


// 生成 padding-left (pl) 类  
@for $i from 0 through $max-classes {  
  .pl-#{$i} {  
    padding-left: $base-unit * $i !important;  
  }
  .ml-#{$i} {  
    margin-left: $base-unit * $i !important;  
  }  
  .pr-#{$i} {  
    padding-right: $base-unit * $i !important;  
  }  
  .mr-#{$i} {  
    margin-right: $base-unit * $i !important;  
  }  
  .pt-#{$i} {  
    padding-top: $base-unit * $i !important;  
  }  
  .mt-#{$i} {  
    margin-top: $base-unit * $i !important;  
  }  
  .pb-#{$i} {  
    padding-bottom: $base-unit * $i !important;  
  }  
  .mb-#{$i} {  
    margin-bottom: $base-unit * $i !important;  
  }  
  .pa-#{$i} {  
    padding: $base-unit * $i !important;  
  }
  .ma-#{$i} {  
    margin: $base-unit * $i !important;  
  }
  .px-#{$i} {
    padding-left: $base-unit * $i !important;
    padding-right: $base-unit * $i !important;
  }
  .mx-#{$i} {
    margin-left: $base-unit * $i !important;
    margin-right: $base-unit * $i !important;
  }
  .py-#{$i} {
    padding-top: $base-unit * $i !important;
    padding-bottom: $base-unit * $i !important;
  }
  .my-#{$i} {
    margin-top: $base-unit * $i !important;
    margin-bottom: $base-unit * $i !important;
  }
}  


.cursor-pointer {
  cursor: pointer;
}

.white {
  background-color: white;
}


.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-justify {
  text-align: justify;
}

.text-nowrap {
  white-space: nowrap;
}

.d-flex {
  display: flex;
}