@y-fe/mixin

y-mixin

这是什么？

y-mixin 是来自阅文前端团队的 CSS 预处理器 mixin 库。

如何使用?

$ npm i @_y/mixin

@import "@_y/mixin";

/* css reset */
#reset;

/* atomic css */
#acss;

/* layout css */
#layout;

我们默认是采用less的方式引入。

@import "@_y/mixin/scss/_mixin.scss";

/* css reset */
@include reset;

/* atomic css */
@include acss;

/* css reset */
@include layout;

Sass 的版本需要自己添加完整路径。

Api

mixin名字	参数	notes
reset	-	CSS reset
acss	-	Atomic css
layout	-	常用的布局样式
margins	[数字列表，单位:px]	基于列表生成4个方向的外间距
paddings	[数字列表，单位:px]	基于列表生成4个方向的内间距
lineHeighs	[数字列表，单位:px]	基于列表行高列表
fontSizes	[数字列表，单位:px]	基于列表生成字号列表

以下方法需要内嵌到选择器中使用。

.clearfix{
    #clearfix;
}

.clearfix{
    @include clearfix;
}

mixin名字	参数	简介
clearfix	-	清除浮动
ell	-	单行文本点点点
ells	[行数:2，行高:null ]	多行文本显示点点点

Api layout

layout 里罗列了几常用的一些方法，有待商榷。

class名字	简介
.clearfix	清除浮动
.ell	单行文本点点点
.i	icon 图标基础类
.trans	200ms transition 动画
.pa_middle	基于 position:absolute 上下居中（浏览器需要支持transform）
.pa_center	基于 position:absolute 左右居中（浏览器需要支持transform）
.pa_auto	基于 position:absolute 上下左右居中（浏览器需要支持transform）

Api margins, paddings

px 为默认参数，如果想用rem，需要手动传入。

@marginsList: 8, 16;
#margins(@marginsList);
// #margins(@marginsList, rem);

@include margins((8, 16));
// @include margins((8, 16), rem);

.mt8 { margin-top: 8px; }
.mr8 { margin-right: 8px; }
.mb8 { margin-bottom: 8px; }
.ml8 { margin-left: 8px; }
.mt16 { margin-top: 16px; }
.mr16 { margin-right: 16px; }
.mb16 { margin-bottom: 16px; }
.ml16 { margin-left: 16px; }

paddings 逻辑和 margins 一样

Api lineHeighs, fontSizes

px 为默认参数，如果想用rem，需要手动传入。

/* 定义行高列表 */
@lineHeightList: 16, 20;
#lineHeights(@lineHeightList);
// #lineHeights(@lineHeightList, rem);

/* 定义字号列表 */
@fontSizeList: 12, 16;
#fontSizes(@fontSizeList);
// #fontSizes(@fontSizeList, rem);

/* 定义字号列表 */
@include fontSizes((16, 20));
// @include fontSizes((16, 20), rem);

/* 定义字行高列表 */
@include lineHeights((12, 16));
// @include lineHeights((12, 16), rem);

.fs12 { font-size: 12px; }
.fs16 { font-size: 16px; }

.lh16 { line-height: 16px; }
.lh20 { line-height: 20px; }