Scss循环生成style

正一品程序员

已于 2023-05-30 18:13:45 修改

阅读量130

点赞数

文章标签： javascript 前端 jquery

于 2023-05-30 18:10:38 首次发布

本文链接：https://blog.csdn.net/weixin_46060121/article/details/130954316

版权

// 循环生成 margin padding
@for $i from 0 through 200 {
  .m-#{$i} {
    margin: $i + px !important;
  }
  .mt-#{$i} {
    margin-top: $i + px !important;
  }
  .mb-#{$i} {
    margin-bottom: $i + px !important;
  }
  .ml-#{$i} {
    margin-left: $i + px !important;
  }
  .mr-#{$i} {
    margin-right: $i + px !important;
  }

  .p-#{$i} {
    padding: $i + px !important;
  }
  .pt-#{$i} {
    padding-top: $i + px !important;
  }
  .pb-#{$i} {
    padding-bottom: $i + px !important;
  }
  .pl-#{$i} {
    padding-left: $i + px !important;
  }
  .pr-#{$i} {
    padding-right: $i + px !important;
  }
}