meta-css文档

平常在写项目的页面的时候，需要定义大量的css class写样式 这个库将一些基础的css样式原子化，通过css class组合的方式达到效果

使用

• 原子类css文件(px)
  node_modules/@carelj/metacss/dist/index.min.css (60kb)
  node_modules/@carelj/metacss/dist/index.half.min.css (34kb)
  half是去除了奇数值的精简版
  因为文件中相同字符很多，gzip后文件大小降低为原大小的1/6
• 源代码scss文件引用

  $unit: "rpx"; // 变量的重写
  @import '@carelj/metacss/metas/index.scss';

• 扩展文件
  node_modules/@carelj/metacss/dist/expand.scss

项目结构

├── dist
│   ├── expand.scss 
│   ├── index.half.min.css
│   └── index.min.css 
└── metas
    ├── modules  
    │   ├── box.scss  
    │   ├── color.scss  
    │   ├── flex.scss  
    │   ├── float.scss  
    │   ├── other.scss  
    │   ├── position.scss
    │   └── aboutUnit
    │       ├── font.scss  
    │       ├── height.scss  
    │       ├── margin.scss  
    │       ├── other.scss  
    │       ├── padding.scss  
    │       ├── positionValue.scss  
    │       └── width.scss  
    ├── vars.scss  
    └── index.scss  

scss变量

// 单位
$unit: 'px';

$baseMaxNum: 100; // 基础数值
$borderMaxNum: 10; // 圆角数值
$fontMaxNum: 60; // 字体数值

// 不过滤奇数数值的原子类
$notFilterOdd: true;

// 打包部分模块
$isPackPadding: true;
$isPackMargin: true;
$isPackWidth: true;
$isPackHeight: true;
$isPackFont: true;
$isPackPositionValue: true;

整体的设计规范

属性简写 - 描述 _ 值

fw           font-weight: bold;  
fs_20        font-size: 20px;  
mg-t_30      margin-top: 30px; 

描述和值不一定同时存在

一些缩略字母代表的意思

根据具体适用的css属性参考
|||| | :-: | :-: | :-: | | block | inline | inline-block | | b | i | ib |

||||| | :-: | :-: | :-: | :-: | | top | bottom | left | right | | t | b | l | r |

|||||| | :-: | :-: | :-: | :-: | :-: | | flex-start | center | flex-end | space-between | space-around | | s | c | e | sb | sa |

||| | :-: | :-: | | 横轴 | 纵轴 | | h | v |

|| | :-: | | auto | | a |

当前已经整合的css样式

box

display -> dp

dp_b
dp_i
dp_ib

color

c -> color

c_0
c_3
c_6
c_9

flex

flex1
flex2
flex3

行 row

row-v_s      
row-h_sb
row_c_c
row-wp_w
row-wp_wr

列 column

column-v_s      
column-h_sb
column_c_c
column-wp_w
column-wp_wr

float

fl
fr

font

字体大小
fs -> font-size
12 ~ 60 和 70 80 90 100 110 120px

fs_12

行高
lh -> line-height
12 ~ 100px

lh_22

字重
fw -> font-weight
数值类型 100 200 300 400 500 600 700 800 900

fw
fwer
fw_100

排版 - 对齐
ta -> text-align

ta_l
ta_c
ta_r

换行 wb -> word-break

wb_ba
wb_ka

height

h -> height
0 ~ 100px

h_45

margin

mg -> margin

mg_12
mg-h_10
mg-h_a
mg-v_10
mg-v_a
mg-t_30
mg-b_40
mg-l_50
mg-r_60

other

||| | :-: | :-: | | pointer | not-allowed | | p | na |

手势
cs -> cursor

cs_p
cs_na

层级
zi -> z-index
0 ~ 10

zi_4

透明度 op -> opacity 0.1 ~ 1 数值放大了10倍

op_1
op_10

圆角 br -> border-radius 0 ~ 20 偶数

br_4

padding

pd -> padding

pd_12
pd-h_10
pd-h_a
pd-v_10
pd-v_a
pd-t_30
pd-b_40
pd-l_50
pd-r_60

position

||||| | :-: | :-: | :-: | :-: | | relative | absolute | fixed | sticky | | r | a | f | s |

pt -> position

pt_r
pt_a
pt_f
pt_s

0 ~ 100px

t_14
b_30
l_50
r_89

width

w -> width
0 ~ 100px

w_45

扩展

扩展的目的 如果将每个数值的原子类都列出来 库的大小就爆炸了 这里支持你用一些库没有提供对应数值的原子类

sass mixin

w_x(110)
h_x(200)
fs_x(56)
lh_x(45)
mg_x(800)
mg-h_x(101)
mg-v_x(280)
mg-t_x(157)
mg-b_x(137)
mg-l_x(489)
mg-r_x(245)
pd_x(123)
pd-h_x(432)
pd-v_x(569)
pd-t_x(970)
pd-b_x(156)
pd-l_x(139)
pd-r_x(179)
t_x(365)
b_x(264)
l_x(178)
r_x(641)

x：代表参数，格式同已经定义的原子类

// 具体使用
@include fs_x(89)

less文件的扩展后续会补充