Fis3-parser-toutiao-less-ui-spec NPM

LESS-ui-spec

根据《今日头条UI设计规范（新版）》和《今日头条UI设计颜色控件规范（研发版）》实现

使用方法

具体的规则请参考代码简述通过npm安装fis3插件：

npm install --save fis3-parser-toutiao-less-ui-spec

然后在fis-conf.js里配置

fis.match('*.less', {
    parser: fis.plugin('toutiao-less-ui-spec')
}, 300);

即可使用。

playground

Codepen

代码简述

variables.less

根据UI规范，所有的变量分为：

字/word，对应CSS属性为color
线/line，对应CSS属性为border-color，考虑到大多数情况均为实线描边，故将border-style: solid写死，加上边线宽度可配置（默认为1px）
面/plane，对应CSS属性为background-color

.title {
    .word1();  // 正常使用，会有日、夜、日按压、夜按压四种状态
    .plane4(); // 按压态默认使用`:active`伪类
}

.banner {
    .plane4(pressing); // 传入参数为按压态的class，同样有四种状态
}

article {
    .word13(no-active); // 通过`no-active`参数控制只产生日、夜两种状态
    .plane2(no-active); // 同时意味着不能使用`no-active`作为按压态的class名
}

.button {
    .line3(); // 正常使用，产生1px宽度的实线描边，有四种状态
}

.bold-button {
    .line2(2px, press); // 边线宽度为2px，按压状态的class为press
}

tag {
    .line3(1px, no-active); // 无按压状态
}

此外，还提供了如@new-blackgray-1，@line8-color等变量方便使用。

utilities.less

提供了多种便捷工具

.text-overflow(@lines); 文字截断函数，可根据行数截断（只支持webkit）
.triangle(@arrowDirection, @color, @height, @width) 实心无边线三角 ▲▼，可配置选中颜色
.half-pixel-border(@linetype, @borderwidth, @borderradius) 半像素边线，采用scale方法实现，支持2x/3x。配合.clear-half-pixel-border ()清除半像素边线
.clearfix 清除浮动

具体的使用方法可以是

button {
    .half-pixel-border(line1, 1px, 3px); // 实现半像素线1边线，带3px圆角

    &.no-border {
        .clear-half-pixel-border(); // 去掉边线
    }
}
.wrapper {
    .clearfix(); // 清除浮动
}
p {
    .text-overflow(2); // 2行省略
}

需要注意的是，由于公用了after伪元素，清除浮动不能和半像素边线同时使用。