ytl-css

开发

• yarn dev

发布

• yarn build

定制

• 引入 index.less 或需要引用的 less 文件，如：src/common/index.less
• 修改对应的变量，如：@font-base: 28;
• lessc xx.less xx.css

自定义函数说明（默认编译）

fn.less

• .hidden-line-fn(@n)：超出 N 行省略显示，用法.hidden-line-3
• .list-color-fn(@list-colors)：列表颜色及背景色，用法.list-color .list-color-success

bg.less

• .bg-tag-fn(@bg-tags);：按 tag 设置背景颜色，用法.bg-dark
• .bg-color-n(@color)：添加背景色，用法.bg-f => background:#fff;
• .bg-color-fn(@list)：.bg-color-n(@color) 的数组形式

font.less

• .font-size-n(@size)：设置字体大小，用法.font-size-18 => font-size:18px;
• .font-size-fn(@list)：.font-size-n(@size) 的数组形式
• .font-tag-fn(@font-tags)：按 tag 设置字体大小，用法.font-size-h6 => font-size:12px;
• .font-weight-n(@size)：设置 font-weight，用法.font-weight-7 => font-weight:700;
• .font-weight-fn()：.font-weight-n(@size) 的数组形式
• .font-color-n(@color)：设置字体颜色，用法.font-color-f => color:#fff;
• .font-color-fn(@list)：.font-color-n(@color) 的数组形式

distance.less

• .dis-type-n(@t, @key, @n)：设置 padding/margin
• .dis-n(@n)：同时设置 padding/margin
• .dis-fn(@list)：.dis-n(@n) 的数组形式

flex.less

• .flex-init()：设置 flex 及 justify-content、align-items
• .flex-item-n(@width)：设置 flex-basis，用法.flex-item-5% => flex:0 0 5%;
• .flex-item-loop()：.flex-item-n(@width) 5 为级数（5% ~ 100%）
• .flex-n-fn(@n)：设置 flex-n

自定义函数（默认不编译）

table.less

• .table：表格基本样式
• .table-col-width-loop()：定义单元格的宽
• .table-border()：给表格添加 border
• .table-stripe()：给表格添加斑马纹
• .table-bgc()：给表格添加首末行，首末单元格背景色，当 @table-first-row-color / @table-last-row-color / @table-first-col-color / @table-last-col-color 为 #fff 时表示不添颜色