0.0.1 • Published 5 years ago
@acss27/acss v0.0.1
CSS-ACSS
这是什么?
这是 ACSS/ utility-first CSS 构建工具。
如何使用
$ npm i @_nu/css-reset;
import "@y-fe/ui-system/lib/index.css";
import "@y-fe/ui-system/lib/_mixin.scss";
目录结构
lib/
├── _mixin.less // 常用 mixin less 版本
├── _mixin.scss // 常用 mixin scss 版本
└── index.css // 常用的 Atomic css
Mixin Api
以下方法需要内嵌到 CSS选择器 中使用
mixin名字 | 参数 | notes |
---|---|---|
clearfix | - | 清除浮动 |
ell | - | 单行文本点点点 |
ells | [行数:2,行高:null ] | 多行文本显示点点点 |
placeholder | [ #999 ] | 设置输入框placeholder颜色 |
selection | [ 背景色, 文字颜色 ] | 设置文本选择颜色 |
margins | [数字列表,单位:px] | 基于列表生成4个方向的外间距 |
paddings | [数字列表,单位:px] | 基于列表生成4个方向的内间距 |
scss 使用
import "@y-fe/ui-system/lib/_mixin.scss";
.clearfix{
@include clearfix;
}
.ell{
@include ell;
}
.ell2row{
@include ells(2, 24px);
}
input, textarea{
@include placeholder(2, 24px);
}
@include selection(#000000, #ffffff);
@include margins((8:8px, 16:16px, 32:32px));
@include paddings((8:8px, 16:16px, 32:32px));
Less 使用
import "@y-fe/ui-system/lib/_mixin.less";
.clearfix{
#clearfix;
}
.ell{
#ell;
}
.ell2row{
#ells(2, 24px);
}
input, textarea{
#placeholder(2, 24px);
}
@include #selection(#000000, #ffffff);
@marginsName: 8, 16, 32;
@marginsValue: 8px, 16px, 32px;
#margins(@marginsName, @marginsValue);
@paddingName: 8, 16, 32;
@paddingValue: 8px, 16px, 32px;
#paddings(@paddingName, @paddingValue);
全局参数
这里以 scss
举例,less
同理。
- 颜色以
c_
开头; z-index
以z_
开头;
// 主色
$c_primary:blue;
$c_secondary:gray;
$c_danger:red;
$c_warning:yellow;
$c_succcess:green;
// 文字颜色
$c_xl: #000;
$c_l: #222;
$c_m: #333; // 文字主色
$c_s: #666;
$c_xs: #999;
// z-index
$z_header: 99;
$z_dialog: 200;
$z_toast: 300;
ACSS
// 基于以上参数创建 Atomic css
.c_primary{ color: $c_primary; }
.c_secondary{ color: $c_secondary; }
.c_danger{ color: $c_danger; }
.c_warning{ color: $c_warning; }
.c_succcess{ color: $c_succcess; }
.c_xl{ color:$c_xl; }
.c_l{ color:$c_l; }
.c_m{ color:$c_m; }
.c_s{ color:$c_s; }
.c_xs{ color:$c_xs; }
0.0.1
5 years ago