mascss

v1.0.0

Published

3 years ago

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

0High
0Medium
0Low

tingxi8087

mascss tailwindcss tailwind css

mas-css

这是一个类似于 tailwindcss 的 css 库

教程

简介

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

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

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

或是这样

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

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

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

快速开始

引入 css 文件

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

或式直接下载仓库中 mascss-min.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;
}

开始使用

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

完整示例

<!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>

变量配置

: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 单位，百分比单位，负数单位

举例

//默认 --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;

颜色

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

使用方法见举例

举例

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

详细配置

说明

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

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

详细见具体配置

盒子宽度

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

备注：无法使用负数单位

盒子高度

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

备注：无法使用负数单位

外边距

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

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

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

内边距

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 布局

flex
对应
display:flex;

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;

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;

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

//$只能为1~10

flex-$
对应
flex:$;

display 属性

flex
对应
display:flex;

block
对应
display:block;

inline-block
对应
display:inline-block;

none
对应
display:none;

定位

abs
对应
position: absolute;

rel
对应
position: relative;

fixed
对应
position: fixed;

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

文字样式

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

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

text-center
对应
text-align: center;

text-left
对应
text-align: left;

text-right
对应
text-align: right;

.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;
}

边框

border
对应
border: 1px solid black;

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

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

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

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

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

滚动条

hidden
对应
overflow: hidden;

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

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

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

scroll-x
对应
overflow-x: scroll;

scroll-y
对应
overflow-y: scroll;

阴影

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

背景

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

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

transform

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

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

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

cursor

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

未来开发计划

cdn 上传

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 代码几乎都是脚本生成，具体请自己看代码