@y-fe/mixin
v0.0.1
Published
CSS Preprocessor Mixin library
Downloads
4
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; }