/leesz

Primary LanguageLess

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

特殊变量名

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

Math

Other