# @\_nu/css-acss
| npm package | npm downloads | github | jsDelivr |
| ------------------------------------ | ------------------------------------------ | ------------------------------- | ------------------------------------------- |
| [![npm package][npm-badge]][npm-url] | [![npm downloads][npm-downloads]][npm-url] | [![github][git-badge]][git-url] | [![jsdelivr][jsdelivr-badge]][jsdelivr-url] |
[npm-badge]: https://img.shields.io/npm/v/@_nu/css-acss.svg
[npm-url]: https://www.npmjs.org/package/@_nu/css-acss
[npm-downloads]: https://img.shields.io/npm/dw/@_nu/css-acss
[git-url]: https://github.com/nu-system/css-acss
[git-badge]: https://img.shields.io/github/stars/nu-system/css-acss.svg?style=social
[jsdelivr-badge]: https://data.jsdelivr.com/v1/package/npm/@_nu/css-acss/badge
[jsdelivr-url]: https://www.jsdelivr.com/package/npm/@_nu/css-acss
[ACSS](http://acss.io/)/ utility-first CSS / Functional CSS 的轻量级解决方案。
灵感来自于 [ACSS](http://acss.io/), [tailwindcss](https://tailwindcss.com/), [quickLayout](https://github.com/zhangxinxu/quickLayout)。
```html
Document
```
## 目录结构
```bash
.
└── lib
├── _mixin.less // less Mixin
├── _mixin.scss // sass Mixin
└── index.css // 核心 css 代码, 直接引用即可
```
## 如何使用
```bash
$ npm i @_nu/css-acss;
```
### React 引用
```jsx
@import "@_nu/css-acss";
```
### CDN
```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;
}
```
> 以上内容只是约定，并未内置在代码中, 你可以定义其中任意颜色值