1.0.0 • Published 12 months ago
mascss v1.0.0
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 代码几乎都是脚本生成，具体请自己看代码
1.0.0
12 months ago