leesz's Introduction

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);

API	解释	备注	变量名
@length	最大边界	从0开始, 传1会得到 0% 和 100%	@end
@customCSSBlock	自定义的代码块(和CSS写法相同)	不可以传递一个class名或ID名	@impl
@start	从哪一个开始	默认从1开始(代表元素位置，从1开始)	@start
@step	每次的增量	默认为1	@step

特殊环境变量

由于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: {})

API	解释	备注	变量名
@collections	所有的集合, 使用逗号分隔		@collections
@customCSSBlock	自定义的代码块(和CSS写法相同)	不可以传递一个class名或ID名	@impl