less和scss循环生成margin和padding

正一品程序员

于 2024-04-25 17:52:06 发布

阅读量310

点赞数 3

文章标签： less scss 前端 vue.js

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

版权

less

// 循环生成 margin padding
.padding(@n, @i: 1) when (@i =< @n) {
  .pt-@{i} {
    padding-top: @i + 0px;
  }
  .pr-@{i} {
    padding-right: @i + 0px;
  }
  .pb-@{i} {
    padding-bottom: @i + 0px;
  }
  .pl-@{i} {
    padding-left: @i + 0px;
  }
  .p-@{i} {
    padding: @i + 0px;
  }
  .padding(@n, (@i + 1));
}

.margin(@n, @i: 1) when (@i =< @n) {
  .mt-@{i} {
    margin-top: @i + 0px;
  }
  .mr-@{i} {
    margin-right: @i + 0px;
  }
  .mb-@{i} {
    margin-bottom: @i + 0px;
  }
  .ml-@{i} {
    margin-left: @i + 0px;
  }
  .m-@{i} {
    margin: @i + 0px;
  }
  .margin(@n, (@i + 1));
}

.padding(200);
.margin(200);

scss

// 循环生成 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;
  }
}