New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details → →

Book a Demo Sign in

mascss

Package Overview

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

mascss

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

latest

npm

Version: 1.0.0

Version published: 3 years ago

Weekly downloads: 1

Maintainers: 1

Weekly downloads

Created: 3 years ago

Source

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

Keywords

FAQs

What is mascss?

Is mascss popular?

Is mascss well maintained?

Package last updated on 06 May 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

mascss

mas-css

教程

简介

快速开始

变量配置

规定

长度

颜色

详细配置

说明

盒子宽度

盒子高度

外边距

内边距

flex 布局

display 属性

定位

文字样式

边框

滚动条

阴影

背景

transform

cursor

未来开发计划

开发介绍

Keywords

Related posts

Axios Maintainer Confirms Social Engineering Attack Behind npm Compromise

Node.js Drops Bug Bounty Rewards After Funding Dries Up