记录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; } }