lessfun v1.1.0

Lessz

Provide some common less tool functions

Loops

Simple keyframes

@import "lessfun/loop.less";
@keyframes frameName {
    .keyframe-loop(1, {
        transform: translate3d(0, 0, 0);
    });
}

// 上面👆结果
@keyframe frameName {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

参数定义

.keyframe-loop(@length, @customCSSBlock: {}, @start: 0, @step: 1);

特殊环境变量

由于customCSSBlock执行时机的原因, 你可以在block里面使用环境中提供的变量名(即是上方API中的变量名)，如:

@import "lessfun/loop.less";
@keyframes frameName {
    .keyframe-loop(2, @impl: {
        width: @keyframe;
        border: @start solid red;
    });
}

// 解析结果
@keyframes frameName {
  0% {
    width: 0%;
    border: 0 solid red;
  }
  50% {
    width: 50%;
    border: 1 solid red;
  }
  100% {
    width: 100%;
    border: 2 solid red;
  }
}

Loop Collections

你可以传递一个Collections用于快速生成CSS定义

@import "lessz/loop.less";

@colors: green, red, blue;
.text {
    .loop-collections(@colors, {
        color: @item;
    });
}

// 结果
.test-blue {
  color: blue;
}
.test-red {
  color: red;
}
.test-green {
  color: green;
}

参数定义

.loop-collections(@collections, @impl: {})

特殊变量名 | 变量名 | 解释 | 备注 |---|---|---| | @index | 下标 | 从0开始 | | @item | 每一项的值 |

Math

Other