Package Exports

@y-fe/mixin

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@y-fe/mixin) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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; }

@y-fe/mixin