@carelj/metacss

1.0.4 • Public • Published

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文件的扩展后续会补充

Readme

Keywords

Package Sidebar

Install

npm i @carelj/metacss

Weekly Downloads

0

Version

1.0.4

License

ISC

Unpacked Size

110 kB

Total Files

21

Last publish

Collaborators

  • care526