# @limm/markrgba-css

> a mark class for css.

Latest version **0.8.0** (published 2022-03-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install @limm/markrgba-css
pnpm add @limm/markrgba-css
yarn add @limm/markrgba-css
bun add @limm/markrgba-css
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.8.0 |
| Published | 2022-03-12 |
| First published | 2020-09-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 305.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11 |
| Author | SunSeekerX |
| Maintainers | limm |
| Keywords | css |

## Links

- npm: https://www.npmjs.com/package/@limm/markrgba-css
- Repository: https://github.com/SunSeekerX/uni-app-starter
- Homepage: https://github.com/SunSeekerX/markrgba-css#readme
- Issues: https://github.com/SunSeekerX/uni-app-starter/issues
- npm.io page: https://npm.io/package/@limm/markrgba-css

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 0.8.0 (latest) — 2022-03-12
- 0.7.0 — 2021-05-26
- 0.6.0 — 2020-11-10
- 0.5.1 — 2020-11-09
- 0.5.0 — 2020-11-09
- 0.4.1 — 2020-11-05
- 0.4.0 — 2020-10-27
- 0.3.2 — 2020-10-22
- 0.3.1 — 2020-10-22
- 0.3.0 — 2020-10-22
- 0.2.0 — 2020-10-09
- 0.1.2 — 2020-09-05
- 0.1.1 — 2020-09-03
- 0.1.0 — 2020-09-03
- 0.0.1 — 2020-09-03

## README

# markrgba-css

## 1️⃣ 简介

Github：[https://github.com/SunSeekerX/markrgba-css](https://github.com/SunSeekerX/markrgba-css)

原作者：[https://gitee.com/CLQing/MarkrgbaCss_UniApp](https://gitee.com/CLQing/MarkrgbaCss_UniApp)

这是一些 css 的简写类名的库，用于开发 uni-app。适用于 vue+nvue 文件。

在写代码的过程中，写 css 是非常头疼的事情，例如：

1. **命名**；这应该是所有程序员的痛。
2. **写 dom 不能直接写 css**；html 和 css 通常不在一块，需要滑动很长才能找到 css 定义的地方。
3. **很多重复定义**；像 `diaplay: flex;` 这样的代码在 css 中写了太多太多

想写的标准规范。找了 bem 规范，实际用起来非常不方便。因为是结合 scss，如果我用了 & 那我我在文档中搜索 css 定义的地方非常不方便。

偶尔发现了类似 `fd-r pt-10 w-150 h-80 fw-w pr-15` 这样的写法。一开始看起来非常的乱，无法维护。

当我理解了之后真香！这就是经验的结晶。上面的意思是

```scss
.fd-r {
  flex-direction: row;
}
.pt-10 {
  padding-top: 10rpx;
}
.w-150 {
  width: 150rpx;
}
.h-80 {
  height: 80rpx;
}
.fw-w {
  flex-wrap: wrap;
}
.pr-15 {
  padding-right: 15rpx;
}
```

现在我的代码：

![hx.png](./assets/hx.png)

## 2️⃣ 快速上手

### 安装

```bash
npm i @limm/markrgba-css
```

### 导入

推荐全部引入，开启 `treeshaking` 会自动裁剪没有用到的类

`${app}/App.vue`

```scss
@import '@limm/markrgba-css';
```

### 使用

就是简介图上直接添加 class 就行了。

## 4️⃣ class

|           |                           |     |
| :-------: | :-----------------------: | :-: |
| .bw-${x}  |    border-width: xpx;     |     |
| .bw-${x}r |    border-width: xrpx;    |     |
| .btw-${x} | border-top-width: ${x}px; |     |

## 5️⃣ 更新日志（CHANGELOG）

### 0.7.0

**功能（Features）**

- 增加 `z-1` 到 `z-100` 的 `z-index: n;` 类

### 0.5.0

#### BREAKING CHANGES

- w-xp => wp-x
- 移除 nvue 直接引入就能使用

---
_Source: https://npm.io/package/@limm/markrgba-css · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._