# mascss

> **这是一个类似于tailwindcss的css库**

Latest version **1.0.0** (published 2023-05-06) · ISC license · 0 weekly downloads

## Install

```sh
npm install mascss
pnpm add mascss
yarn add mascss
bun add mascss
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2023-05-06 |
| First published | 2023-05-06 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 703 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | tingxi8087 |
| Maintainers | tingxi8087 |
| Keywords | mascss, tailwindcss, tailwind, css |

## Links

- npm: https://www.npmjs.com/package/mascss
- Repository: git@gitcode.net:tingxi8087/mascss
- npm.io page: https://npm.io/package/mascss

## Dependencies (1)

- [cssmin](https://npm.io/package/cssmin.md) ^0.4.3

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2023-05-06

## README

# mas-css

**这是一个类似于 tailwindcss 的 css 库**

## 教程

#### 简介

没听说过 tailwindcss?那我们从零开始！

当你需要为一个 div 中写一个样式，你可能会这样：

```html
<div
  style="color: pink;background-color: skyblue;width: 16px;margin-top: 20px;"
>
  hello,mas-css
</div>
```

或是这样

```html
<style>
  .test {
    width: 16px;
    color: pink;
    background-color: skyblue;
    margin-top: 20px;
  }
</style>
<div class="test">hello,mas-css</div>
```

当你使用了 mascss，就只用这样

```html
<style>
  :root {
    --a-color: pink;
    --b-color: skyblue;
  }
</style>
<div class="color-a w-1 mt-1m bg-b">hello,mas-css</div>
```

#### 快速开始

引入 css 文件

```html
<link rel="stylesheet" href="http://assets.tingxi8087.com/mascss-min.css" />
```

或式直接下载仓库中 **mascss-min.css**

设置全局样式，若不设置，默认为以下属性

```css
:root {
  --px-unit: 16px;
  --px-min-unit: 5px;
  --primry-color: #409eff;
  --success-color: #67c23a;
  --waring-color: #e6a23c;
  --danger-color: #f56c6c;
  --a-color: pink;
  --b-color: skyblue;
  --c-color: red;
  --d-color: #909399;
}
```

开始使用

```html
<div class="w-2 color-a m-1">hello,mas-css</div>
```

完整示例

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>mas-css test</title>
    <link rel="stylesheet" href="http://assets.tingxi8087.com/mascss-min.css" />
  </head>
  <style>
    /* 这段css可以不写，不写默认是以下配置 */
    :root {
      --px-unit: 16px;
      --px-min-unit: 5px;
      --primry-color: #409eff;
      --success-color: #67c23a;
      --waring-color: #e6a23c;
      --danger-color: #f56c6c;
      --a-color: pink;
      --b-color: skyblue;
      --c-color: red;
      --d-color: #909399;
    }
  </style>
  <body>
    <div class="w-2 color-a m-1">hello,mas-css</div>
  </body>
</html>
```

## 变量配置

```css
:root {
  --px-unit: 16px; //单位配置，w-2 则相当于 "width:32px;" 16*2=32
  --px-min-unit: 5px; //单位配置，w-2m 则相当于 "width:10px;" 5*2=10
  --primry-color: #409eff; //内置颜色变量，color-primry相当于 "color:#409eff;"
  --success-color: #67c23a; //一下同上
  --waring-color: #e6a23c;
  --danger-color: #f56c6c;
  --a-color: pink;
  --b-color: skyblue;
  --c-color: red;
  --d-color: #909399;
}
```

## 规定

#### 长度

支持 px 单位，百分比单位，负数单位

**举例**

```css
//默认 --px-unit: 16px;  --px-min-unit: 5px;


//px单位 数字只能是0~10，一个x表示乘以10,两个x表示乘以100
mt-0 //等同于 margin-top:0;
mt-2 //等同于 margin-top:32px;
mt-2x //等同于 margin-top:320px;
mt-2xx //等同于 margin-top:3200px;
mt-2m //等同于 margin-top:10px;
mt-2mx //等同于 margin-top:100px;
mt-2mxx //等同于 margin-top:1000px;

//百分比单位 数字只能是10~100 且为10的倍数
mt-20-pct //等同于 margin-top:20%;

//负数单位 数字前再加一个-
mt--2 //等同于 margin-top:-32px;
mt-2m //等同于 margin-top:-10px;
mt--20-pct //等同于 margin-top:-20%;
//auto
mt-auto //等同于 margin-top:auto;
```

#### 颜色

<mark>除变量颜色外，其中还内置了["#444", "#666", "#888", "#eee", "#aaa", "#000", "#fff"]几种颜色</mark>

使用方法见举例

**举例**

```css
//默认 --a-color: pink; --primry-color: #409eff;
color-a //等同于 color:pink;
color-444 //等同于 color:#444;
color-000 //等同于 color:#000; 注意只能使用已内置的！
bg-primry //等同于 color:#409eff;
```

## 详细配置

#### 说明

$长度 使用规定中的长度，个别配置会有特殊

$颜色 使用规定中的颜色，个别配置会有特殊

详细见具体配置

#### 盒子宽度

```css
w-$长度
对应
width: $长度;
```

**备注**：无法使用负数单位

#### 盒子高度

```css
h-$长度
对应
height: $长度;
```

**备注**：无法使用负数单位

#### 外边距

```css
m-$长度、mt-$长度、mr-$长度、ml-$长度、mb-$长度
分别对应
marigin: $长度;
marigin-top: $长度;
marigin-right: $长度;
marigin-left: $长度;
marigin-bottom: $长度;

//以及
.my-$长度 {
  marigin-top: $长度;
  marigin-bottom: $长度;

.mx-$长度 {
  marigin-left: $长度;
  marigin-right: $长度;
}
```

#### 内边距

```css
p-$长度、pt-$长度、pr-$长度、pl-$长度、pb-$长度
分别对应
padding: $长度;
padding-top: $长度;
padding-right: $长度;
padding-left: $长度;
padding-bottom: $长度；

//以及
.py-$长度 {
  padding-top: $长度;
  padding-bottom: $长度;
}
.px-$长度 {
  padding-left: $长度;
  padding-right: $长度;
}
```

#### flex 布局

```css
flex
对应
display:flex;
```

```css
flex-x-c、flex-x-sa、flex-x-sb、flex-x-start、flex-x-end
分别对应
justify-content: center;
justify-content: space-around;
justify-content: space-between;
justify-content: flex-start;
justify-content: flex-end;
```

```css
flex-y-c、flex-y-sa、flex-y-sb、flex-y-start、flex-y-end
分别对应
align-items: center;
align-items: space-around;
align-items: space-between;
align-items: flex-start;
align-items: flex-end;
```

```css
flex-wrap 对应 flex-wrap: wrap;
flex-col 对应 flex-direction: column;
flex-row  对应 flex-direction: row;
```

```css
//$只能为1~10

flex-$
对应
flex:$;
```

#### display 属性

```css
flex
对应
display:flex;
```

```css
block
对应
display:block;
```

```css
inline-block
对应
display:inline-block;
```

```css
none
对应
display:none;
```

#### 定位

```css
abs
对应
position: absolute;
```

```css
rel
对应
position: relative;
```

```css
fixed
对应
position: fixed;
```

```css
top-$长度、left-$长度、right-$长度、bottom-$长度
分别对应
top:$长度;
left:$长度;
right:$长度;
bottom:$长度;
```

#### 文字样式

```css
font-$长度
对应
font-size:$长度;
//注意
//此处没有负数单位
//例如
font-2
对应
font-size:32px;  //16*2
//另外字体大小支持更细致的调整 即1~100px
.font-$px{
    font-size:$px;
}
//例如
font-2px
对应
font-size: 2px;
```

```css
color-$颜色
对应
color:$颜色;
```

```css
text-center
对应
text-align: center;
```

```css
text-left
对应
text-align: left;
```

```css
text-right
对应
text-align: right;
```

```css
.font-100 {
  font-weight: 100;
}
.font-200 {
  font-weight: 200;
}
.font-300 {
  font-weight: 300;
}
.font-400 {
  font-weight: 400;
}
.font-500 {
  font-weight: 500;
}
.font-600 {
  font-weight: 600;
}
.font-700 {
  font-weight: 700;
}
.font-800 {
  font-weight: 800;
}
.font-900 {
  font-weight: 900;
}
```

#### 边框

```css
border
对应
border: 1px solid black;
```

```css
border-top
对应
border-top: 1px solid black;
```

```css
border-right
对应
border-right: 1px solid black;
```

```css
border-left
对应
border-left: 1px solid black;
```

```css
border-bottom
对应
border-bottom: 1px solid black;
```

```css
round-$长度
对应
border-radius:$长度;
//注意
//此处 round-1 为 border-radius:1px 同理 round-2 为 border-radius:2px
//但round-1m 依然为 border-radius:5px
//且没有负数单位
```

#### 滚动条

```css
hidden
对应
overflow: hidden;
```

```css
scroll-auto
对应
overflow: auto;
对应
overflow: hidden;
```

```css
scroll-auto-x
对应
overflow-x: auto;
```

```css
scroll-auto-y
对应
overflow-y: hidden;
```

```css
scroll-x
对应
overflow-x: scroll;
```

```css
scroll-y
对应
overflow-y: scroll;
```

#### 阴影

```css
box-shadow
对应
box-shadow: 2px 2px 5px #888;
```

#### 背景

```css
数字为[1,2,3,4,5,6,7，8,9,10]
opacity-$数字
对应
opacity: .$数字;
```

```css
bg-$颜色
对应
background-color:$颜色;
```

#### transform

```css
translatex-$长度
对应
transform: translateX($长度);
```

```css
translatey-$长度
对应
transform: translateY($长度);
```

```css
translate-$长度
对应
transform: translate($长度,$长度);
```

#### cursor

```css
.pointer {
  cursor: pointer;
}
.cursor-d {
  cursor: default;
}
.cursor-p {
  cursor: pointer;
}
.select-none {
  user-select: none;
}
```

## 未来开发计划

<mark>cdn 上传</mark> 

flex 布局，主轴更换 √
flex 布局，多行侧轴排列

flex:0.1 变 flex:1 √

添加 display:inline; √

增加更多盒子阴影

字体宽度 √

虚线边框

负数单位只有负百分比生效 bug √

行高

top left right bottom 添加 0 属性 √

cursor 属性， user-select:none 属性 √

margin 0 和 auto 属性 √

font-size 1~100px √

文本域 resize:none √

样式快捷查看器

## 开发介绍

/package 样式分包

/scripts 辅助开发的脚本，其中 css 代码几乎都是脚本生成，具体请自己看代码

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