@_y/mixin 中文文档教程
y-mixin
这是什么?
y-mixin
是来自阅文前端团队的 CSS 预处理器 mixin 库。
如何使用?
npm i @_y/mixin
@import "@_y/mixin";
/* css reset */
#reset;
/* atomic css */
#acss;
/* layout css */
#layout;
/* 定义外间距列表 */
@marginList: 5, 10, 15, 20, 30, 35, 40;
#margins(@marginList);
/* 定义内间距列表 */
@paddingList: 5, 10, 15, 20, 30, 35, 40;
#paddings(@paddingList);
我们默认是采用less的方式引入。
@import "@_y/mixin/scss/_mixin.scss";
/* css reset */
@include reset;
/* atomic css */
@include acss;
/* css reset */
@include layout;
/* 定义内间距列表 */
@include paddings(px, (2, 4, 8, 16));
/* 定义外间距列表 */
@include margins(px, (2, 4, 8, 16));
/* 定义字号列表 */
@include fontSizes(px, (2, 4, 8, 16));
/* 定义字行高列表 */
@include lineHeights(px, (2, 4, 8, 16));
Sass 的版本需要自己添加完整路径。
Api
这个还在跟进中。