CC-Less学习笔记之函数与模板

背景

工作中遇到这样一个场景：需要输出多张不同金额的赠送金，它们的背景色和图各不相同，如果每个都另起一个className会显得非常的冗长，所以利用less的函数与循环进行简化。

效果图

html

<div className="list">
    {recordList.map((record: any, index: any) => (
        <div key={index} className="RecordItem">
        <div className={`money-picture-${record.winMoney}`}>
            <span>{record.winMoney}</span>元
        </div>
        <div className={`money-detail-${record.winMoney}`}>
            <span>{record.winMoney}元赠送金</span>
            <div>获取时间：{record.winTime}</div>
        </div>
        </div>
    ))}
</div>

目标输出

    .money-detail-2{
        ...//省略
            background-color: #D9B7FA;
    }
    .money-detail-5{
        ...//省略
            background-color: #99B8F6,;
    }
    ...
    .money-detail-99{
        ...//省略
            background-color: #9AD7F5,;
    }

用到的less函数方法

    length(@bgcardList)  //用于获取列表的长度  
    extract(@bgcardList, 3)  //用于获取列表元素

less代码

// 1. 先定义我们的金额类别列表以及对应的颜色列表
@moneyType: 2,5,20,50,99;
@backgroundColorList: #D9B7FA,#99B8F6,#B5E1B6,#F7CCB4,#9AD7F5;
// 2. 提取公共部分css，定义成一个模板函数
.backgroundPic(@className,@backgroundColor){
  .money-detail-@{className}{
    @common-detail();
    background-color: @backgroundColor;
  }
}
// 3. 循环遍历金额类别列表，然后赋予对应的背景颜色
.loop(@i) when (@i < length(@moneyType)+1){
  .backgroundPic(extract(@moneyType, @i),extract(@backgroundColorList, @i));
  .loop(@i+1); 
}

// 4. 调用loop 直接传1，从列表里第一个开始遍历
.loop(1)