记录less和scss批量生成样式

　　平时我们总是循规蹈矩预设一部分样式，但是又不想使用tailwind css框架，所以就用一种新方式，CSS里也是可以像执行function一样，批量生成样式，减少重复相似的样式定义。

• 递归生成（Less）

  @end: 50;
  .generate-space(@i) when (@i > 0) {
  
  // 使用 mt-*、mr-*、mb-* 和 ml-* 工具来控制元素一侧的边距。
  .mt-@{i} {
    margin-top: @i * 1px;
  }
  
  .mr-@{i} {
    margin-right: @i * 1px;
  }
  
  .mb-@{i} {
    margin-bottom: @i * 1px;
  }
  
  .ml-@{i} {
    margin-left: @i * 1px;
  }
  
  // 使用 mx-* 工具来控制元素的水平边距
  .mx-@{i} {
    margin-left: @i * 1px;
    margin-right: @i * 1px;
  }
  
  // 使用 my-* 工具来控制元素的垂直边距。
  .my-@{i} {
    margin-top: @i * 1px;
    margin-bottom: @i * 1px;
  }
  
  // 使用 m-* 工具来控制元素所有边的边距
  .m-@{i} {
    margin: @i * 1px;
  }
  
  
  // 使用 pt-*、pr-*、pb-* 和 pl-* 工具来控制元素一侧的填充。
  .pt-@{i} {
    padding-top: @i * 1px;
  }
  
  .pr-@{i} {
    padding-right: @i * 1px;
  }
  
  .pb-@{i} {
    padding-bottom: @i * 1px;
  }
  
  .pl-@{i} {
    padding-left: @i * 1px;
  }
  
  // 使用 px-* 工具来控制元素的水平填充。
  .px-@{i} {
    padding-left: @i * 1px;
    padding-right: @i * 1px;
  }
  
  // 使用 py-* 工具来控制元素的垂直填充。
  .py-@{i} {
    padding-top: @i * 1px;
    padding-bottom: @i * 1px;
  }
  
  // 使用 p-* 工具来控制元素所有边的填充。
  .p-@{i} {
    padding: @i * 1px;
  }
  
  .generate-space(@i - 1);
  }
  
  .generate-space(@end);

• 批量生成（Scss）

  // 循环生成常用属性
  @for $i from 1 through 50 {
    // 使用 mt-*、mr-*、mb-* 和 ml-* 工具来控制元素一侧的边距。
    .mt-#{$i} {
        margin-top: #{$i}px;
    }
  
    .mr-#{$i} {
        margin-right: #{$i}px;
    }
  
    .mb-#{$i} {
        margin-bottom: #{$i}px;
    }
  
    .ml-#{$i} {
        margin-left: #{$i}px;
    }
  
    // 使用 mx-* 工具来控制元素的水平边距
    .mx-#{$i} {
        margin-left: #{$i}px;
        margin-right: #{$i}px;
    }
  
    // 使用 my-* 工具来控制元素的垂直边距。
    .my-#{$i} {
        margin-top: #{$i}px;
        margin-bottom: #{$i}px;
    }
  
    // 使用 m-* 工具来控制元素所有边的边距
    .m-#{$i} {
        margin: #{$i}px;
    }
  
    // 使用 pt-*、pr-*、pb-* 和 pl-* 工具来控制元素一侧的填充。
    .pt-#{$i} {
        padding-top: #{$i}px;
    }
  
    .pr-#{$i} {
        padding-right: #{$i}px;
    }
  
    .pb-#{$i} {
        padding-bottom: #{$i}px;
    }
  
    .pl-#{$i} {
        padding-left: #{$i}px;
    }
  
    // 使用 px-* 工具来控制元素的水平填充。
    .px-#{$i} {
        padding-left: #{$i}px;
        padding-right: #{$i}px;
    }
  
    // 使用 py-* 工具来控制元素的垂直填充。
    .py-#{$i} {
        padding-top: #{$i}px;
        padding-bottom: #{$i}px;
    }
  
    // 使用 p-* 工具来控制元素所有边的填充。
    .p-#{$i} {
        padding: #{$i}px;
    }
  }