build-block-css v1.0.5

build block css

积木css，为什么叫积木，就是觉得有些样式其实是共通的，我们在写一些组件样式的时候都是在重复着一些代码量，所以就将一些公共的样式抽离了出来，用的时候就想堆积木一样，一个个往上叠就可以了。

其实就是一些公共样式的抽离体，包含了margin，padding，font，border，flex，scrollbar。

在style/variable.scss里简单定义了一些变量，用来控制生成的css的大小，可以根据自己的项目定义从而来控制生产的css的大小，默认没有前缀，可以通过修改$libname自己加项目前缀以避免命名冲突。

以来与sass，用sass命令打包成css的，自己修改玩变量后别忘了重新打包生成一下css。

说明

margin

类名有  mg-10, mg-t-10, mg-b-10, mg-l-10, mg-r-10
取值范围从mg-1到mg-100，mg-1到mg-30是全范围值，30以上为跨度为每隔5，mg-30,mg-35,mg-40...可以variable.scss里修改阈值和间隔值

mg-10
{
  margin: 10px;
}

mg-t-10
{
  margin-top: 10px;
}

mg-b-10
{
  margin-bottom: 10px;
}

mg-l-10
{
  margin-left: 10px;
}

mg-r-10
{
  margin-right: 10px;
}

padding

类名有  pd-10, pd-t-10, pd-b-10, pd-l-10, pd-r-10
取值范围同margin
pd-10
{
  padding: 10px;
}

pd-t-10
{
  padding-top: 10px;
}

pd-b-10
{
  padding-bottom: 10px;
}

pd-l-10
{
  padding-left: 10px;
}

pd-r-10
{
  padding-right: 10px;
}

border

命名规范  bor-类型名(颜色)-粗细
类型名和粗细都可以在variable.scss里自己定义
现有类型： danger， success， info
类名 bor-danger-1，bor-t-danger-1，bor-b-danger-1，bor-l-danger-1，bor-r-danger-1

bor-danger-1
{
  border: 1px solid #F56C6C;
}

bor-t-danger-1
{
  border-top: 1px solid #F56C6C;
}

bor-b-danger-1
{
  border-bottom: 1px solid #F56C6C;
}

bor-l-danger-1
{
  border-left: 1px solid #F56C6C;
}

bor-r-danger-1
{
  border-right: 1px solid #F56C6C;
}

border-radius

类名 br-3, br-5, br-8, br-10, br-15, br-round
可以在variable.scss里控制生成想要的圆角半径
br-3
{
  border-radius: 3px
}

br-round 
{
  border-radius: 50%;
}

font

字体大小
类名 fs-12,16,18,20,22,24,26,28,30,32,34,36,48,64
fs-12
{
  font-size: 12px;
}

行高
类名 lh-12,14,16,18,20,22,24,26,28,30,32,34,36
lh-12
{
  line-height: 12px;
}

溢出隐藏(需要自己给出宽度)
单行 text-e
{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
多行 mult-t-e-2, mult-t-e-3
自己可以在variable.scss里配置想要生成的行数
{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}

flex

类名 flex
flex
{
  display: flex;
}

类名 flex-1, 2, 3, 4, 5
flex-1
{
  flex: 1;
}

类名 flex-d-r, flex-d-rr, flex-d-c, flex-d-cr
direction相关 r: row, rr: row-reverse, c: column, cr: column-reverse
flex-d-r
{
  flex-direction: column;
}

类名 flex-wrap, flex-nowrap, felx-wrapr
换行相关 nowrap: nowrap, wrap: wrap, wrapr: wrap-reverse
flex-wrap
{
  flex-wrap: wrap
}

类名 flex-jc-fs, flex-jc-fe, flex-jc-c, flex-jc-sb, flex-jc-sa, flex-jc-se 
行显示相关 fs: flex-start, fe: flex-end, c: center, sb: space-between, sa: space-around, se: space-evenly
flex-jc-fs
{
  justify-content: flex-start
}

类名 flex-ai-fs, flex-ai-fe, flex-ai-c, flex-ai-b, flex-ai-s 
列显示 fs: flex-start, fe: flex-end, c: center, b: baseline, s: stretch
flex-ai-fs
{
  align-items: flex-start;
}

类名 flex-center 
居中显示
flex-center
{
  justify-content: center;
  align-items: center;
}

类名 flex-no-shrink
不允许收缩
flex-no-shrink
{
  flex-shrink: 0;
}

position

类名 pos-abs, pos-rel, pos-fix, pos-ini, pos-sti, pos-inh, pos-sta
定位相关 abs: absolute, rel: relative, fix: fixed, ini: initial, sti: sticky, inh: inherit, sta: static

pos-abs
{
  position: absolute;
}

类名 pos-center
定位居中显示
{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}