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

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


.cursor-pointer {
  cursor: pointer;
}

.white {
  background-color: white;
}