`bash
.
└── lib
   ├── _mixin.less // less Mixin
   ├── _mixin.scss // sass Mixin
   └── index.css // 核心 css 代码, 直接引用即可
`

如何使用

`bash
$ npm i @_nu/css-acss;
`

$3

`jsx
@import "@_nu/css-acss";
`

$3

`HTML

`

ACSS 命名规则

| Declarations | This | ACSS.io | Tailwind CSS | Blowdrycss | Basscss | Tachyons |
| -------------------- | -------- | ----------- | ----------------- | -------------------- | ---------------- | ---------- |
| margin: 12px; | .m12 | .M(12px) | .m-4 | .margin-12 | .m2 | .ma3 |
| text-align: center | .tac | .Ta(c) | .text-center | .text-align-center | .center | .tc |
| margin: -12px | .m-12 | .M(-12px) | .-m-4 | .margin-n12 | .mxn2 | .na3 |
| font-size: 25px | .fs25 | .Fz(25px) | .text-2xl | .font-size-25 | .h2 | .f3 |
| width: 50% | .w50% | .W(50%) | .w-1/2 | .width-50p | .col-6 | .w-50 |
| line-height: 1.5 | .lh1.5 | .Lh(1.5) | .leading-normal | .line-height-1_5 | .line-height-4 | .lh-copy |

1. 只取首字母 .db{ display:block; };
2. 有数字直接连接 .mb10{ margin-bottom:10px; };
3. 百分号用 % 表示 .w100\%{ width:100%; };
4. 小数点用 . 表示 .lh1\.2{ line-height:1.2 };
5. 有想要自定义的样式，用 \:分割 .c\:fff{ color:#fff; }
6. hover 样式，用 \:分割 .db\:h:hover{ display:block; }

> 第六个只是一个推荐的写法(beta)，目前代码库中并没有这个代码

Mixin

| 名称 | 作用 |
| ----------------- | ---------------------------------- |
| Clearfix | 清除浮动 |
| Ellipsis | 单行文本省略 |
| Ellipsis-multiple | 多行文本点点点(移动端) |
| Margins | 用表格的方式撑满浮动之后的剩余空间 |
| Paddings | 用表格的方式撑满浮动之后的剩余空间 |
| ACSS | 用表格的方式撑满浮动之后的剩余空间 |

因为不同的项目，设计规范是不一样的。所以在 lib/index.css 里面只提供了，.m0{ margin:0; } .p0{ padding:0; } 这两个通用的间距样式。

其它需要自己使用 mixin 方法 创建 Margins, Paddings, ACSS。

`SCSS
// scss
@import "@_nu/css-acss/lib/_mixin.scss";

@include Margins((8,16), 1px); // .mt8, .mr8, .mb8, .ml8, .mt16, .mr16, .mb16, .ml16;
@include Paddings((8,16), 1px); // .pt8, .pr8, .pb8, .pl8, .pt16, .pr16, .pb16, .pl16;
@include ACSS(font-size, fs, (12,16), 1px); // .fs12, .fs16
@include ACSS(line-height, lh, (8,16), 1px); // .lh16, .lh24
@include ACSS(font-weight, fw, (300,500)); // .fw300, .fw500

.clearfix{ @include Clearfix; }
.ell{ @include Ellipsis; }
.ells { @include Ellipsis-multiple; }
.cell{ @include Cell; }
`

`less
// less
@import '@_nu/css-acss/lib/_mixin.less';

#Margins(8, 16; 1px); // .mt8, .mr8, .mb8, .ml8, .mt16, .mr16, .mb16, .ml16;
#Paddings(8, 16; 1px); // .pt8, .pr8, .pb8, .pl8, .pt16, .pr16, .pb16, .pl16;
#ACSS(font-size; fs; 12, 16; 1px); // .fs12, .fs16;
#ACSS(line-height; lh; 16, 20; 1px); // .lh16, .lh20;
#ACSS(font-weight; fw; 300, 500); // .fw400, fw700;

.clearfix {
#Clearfix;
}
.ell {
#Ellipsis;
}
.ells {
#Ellipsis-multiple;
}
.cell {
#Cell;
}
`

`HTML


`css
/*!
管理颜色 .c\:{}
*/
.c\:xl {
color: #111;
}
.c\:l {
color: #333;
}
.c\:m {
color: #666;
}
.c\:s {
color: #999;
}
.c\:xs {
color: #ddd;
}
.c\:primary {
color: blue;
}
.c\:secondary {
color: gray;
}
.c\:danger {
color: red;
}
.c\:warning {
color: yellow;
}
.c\:success {
color: green;
}
.c\:info {
color: cadetblue;
}
.c\:light {
color: #f8f9fa;
}
.c\:dark {
color: #343a40;
}
``

> 以上内容只是约定，并未内置在代码中, 你可以定义其中任意颜色值