【Less/Sass】批量生成样式

#平时我们总是循规蹈矩写死样式，习惯思维 A is A， B is B，最近也是学到了一种新方式，CSS里也是可以像执行function一样，批量生成样式，减少重复相似的样式定义#

场景

根据不同的规范，我们常需要对不同元素、控件设置不同间距，如表单间元素4px，按钮间12px，表格内8px（非基准，只是举个例子），基本是以偶数为单位，2、4、6、8……

最常见开发方式

.mt-4 {
    margin-top: 4px;
}

.mt-6 {
    margin-top: 6px;
}

.mt-8 {
    margin-top: 8px;
}

……

然后在html模板处再绑定class

进阶版

使用预处理器（‌如Sass或Less）‌‌：‌
预处理器扩展了CSS的功能，‌允许使用变量、‌嵌套规则、‌混合（‌mixins）‌、‌函数等高级功能，‌可以方便地批量生成样式。‌

递归生成（Less）

// 使用 Less 的循环功能
.margin-top(@i: 0, @n: 24) when(@i <= @n) {
    // 创建一个类选择器，‌类名包含当前索引
    .mt-@{i} {
        // 计算间距
        margin-top: @i + 0px;
    }

    // 递归调用自身
    margin-top(@i + 2);
}

// 初始化循环
.margin-top();

在Less中，‌定义变量需要使用@符号作为前缀，‌用于区分变量和其他选择器或属性名。‌

批量生成（Sass）

// 遍历生成 12 个类
@for $i from 1 through 12 {
    // 创建一个类选择器，‌类名包含当前索引
    .width-#{$i} {
        // 计算宽度
        width: 10 * $i;
    }
}

题外话：工作中主要用Less，基本不见用Sass，所以我也了解甚少……