Emmet + RwdEmmet
Emmet
基于Emmet命名的css原子类库,没有添加标示。
visibility
.v-h {visibility: hidden;}
.v-v {visibility: visible;}
font-weight
.fw-b {font-weight: bold;}
.fw-n {font-weight: normal;}
.fw-l {font-weight: lighter;}
.fw-br {font-weight: bolder;}
font-style
.fs-i {font-style: italic;}
.fs-n {font-style: normal;}
vertical-align
.va-t {vertical-align: top;}
.va-m {vertical-align: middle;}
.va-b {vertical-align: bottom;}
.va-tb {vertical-align: text-bottom;}
.va-tt {vertical-align: text-top;}
.va-sp {vertical-align: super;}
.va-sb {vertical-align: sub;}
text-align
.ta-c {text-align: center;}
.ta-l {text-align: left;}
.ta-r {text-align: right;}
.ta-j {text-align: justify;}
text-align-last
.tal-c {text-align-last: center;}
.tal-l {text-align-last: left;}
.tal-r {text-align-last: right;}
.tal-j {text-align-last: justify;}
text-transform
.tt-n {text-transform: none;}
.tt-c {text-transform: capitalize;}
.tt-u {text-transform: uppercase;}
.tt-l {text-transform: lowercase;}
text-decoration
.td-n {text-decoration: none;}
.td-o {text-decoration: overline;}
.td-l {text-decoration: line-through;}
.td-u {text-decoration: underline;}
background-repeat
.bgr-n {background-repeat: no-repeat;}
.bgr-x {background-repeat: repeat-x;}
.bgr-y {background-repeat: repeat-y;}
.bgr-r {background-repeat: round;}
.bgr-s {background-repeat: space;}
background-attachment
.bga-f {background-attachment: fixed;}
background-size
.bgs-cv {background-size: cover;}
.bgs-ct {background-size: contain;}
background-clip
.bgc-pd {background-clip: padding-box;}
.bgc-bb {background-clip: border-box;}
.bgc-cb {background-clip: content-box;}
background-origin
.bgo-pd {background-origin: padding-box;}
.bgo-bb {background-origin: border-box;}
.bgo-cb {background-origin: content-box;}
list-style-type
.lst-n {list-style-type: none;}
.lst-d {list-style-type: disc;}
.lst-c {list-style-type: circle;}
.lst-s {list-style-type: square;}
.lst-u {list-style-type: upper-roman;}
.lst-l {list-style-type: lower-alpha;}
.lst-dc {list-style-type: decimal;}
cursor
.cur-p {cursor: pointer;}
.cur-t {cursor: text;}
.cur-m {cursor: move;}
.cur-c {cursor: crosshair;}
.cur-h {cursor: help;}
.cur-d {cursor: default;}
clear
.cl-n {clear: none;}
.cl-l {clear: left;}
.cl-r {clear: right;}
.cl-b {clear: both;}
box-sizing
.bxz-cb {box-sizing: content-box;}
.bxz-bb {box-sizing: border-box;}
overflow
.ov-a {overflow: auto;}
.ov-v {overflow: visible;}
.ov-h {overflow: hidden;}
.ov-s {overflow: scroll;}
overflow-x
.ovx-a {overflow-x: auto;}
.ovx-v {overflow-x: visible;}
.ovx-h {overflow-x: hidden;}
.ovx-s {overflow-x: scroll;}
overflow-y
.ovy-a {overflow-y: auto;}
.ovy-v {overflow-y: visible;}
.ovy-h {overflow-y: hidden;}
.ovy-s {overflow-y: scroll;}
z-index(0-10)
.z1 {z-index: 1;}
.z4 {z-index: 4;}
.z7 {z-index: 7;}
.z10 {z-index: 10;}
opacity(0-10)
.op1 {opacity: .1;}
.op4 {opacity: .4;}
.op7 {opacity: .7;}
.op10 {opacity: 1;}
text-indent (0-10)
.ti-0 {text-indent: 0;}
.ti-1 {text-indent: 1em;}
.ti-2 {text-indent: 2em;}
.ti-10 {text-indent: 10em;}
background-position(常用数值%)
.bgp_50p0 {background-position: 50% 0;}
.bgp_100p0 {background-position: 100% 0;}
.bgp_0p50p {background-position:0% 50%;}
.bgp_0p100p {background-position:0% 100%;}
.bgp_50p50p {background-position:50% 50%;}
.bgp_50p100p {background-position:50% 100%;}
.bgp_100p50p {background-position:100% 50%;}
.bgp_100p100p {background-position:100% 100%;}
RWD_Emmet
常在响应式中编写最多的属性可以添加标示,方便调用,自行在 src/static/sass/emmet.scss 添加需要的属性
display
.d-(xs,sm,md,lg)-n {display: none;}
.d-(xs,sm,md,lg)-i {display: inline;}
.d-(xs,sm,md,lg)-b {display: block;}
.d-(xs,sm,md,lg)-ib {display: inline-block;}
.d-(xs,sm,md,lg)-f {display: flex;}
.d-(xs,sm,md,lg)-g {display: grid;}
.d-(xs,sm,md,lg)-t {display: table;}
.d-(xs,sm,md,lg)-bc {display: table-cell;}
float
.fl-(xs,sm,md,lg)-n {float: none;}
.fl-(xs,sm,md,lg)-l {float: left;}
.fl-(xs,sm,md,lg)-r {float: right;}
position
.pos-(xs,sm,md,lg)-s {position: static;}
.pos-(xs,sm,md,lg)-f {position: fixed;}
.pos-(xs,sm,md,lg)-r {position: relative;}
.pos-(xs,sm,md,lg)-a {position: absolute;}
采用rem方案 1rem=100px
font-size (0-100)
.fz-(xs,sm,md,lg)-0 {font-size: 0;}
.fz-(xs,sm,md,lg)-16 {font-size: .16rem;}
.fz-(xs,sm,md,lg)-20 {font-size: .2rem;}
.fz-(xs,sm,md,lg)-100 {font-size: 1rem;}
padding(0-100)
.p-(xs,sm,md,lg)-0 {padding: 0;}
.p-(xs,sm,md,lg)-16 {padding: .16rem;}
.p-(xs,sm,md,lg)-20 {padding: .2rem;}
.p-(xs,sm,md,lg)-100 {padding: 1rem;}
padding-top (0-100)
.pt-(xs,sm,md,lg)-0 {padding-top: 0;}
.pt-(xs,sm,md,lg)-16 {padding-top: .16rem;}
.pt-(xs,sm,md,lg)-20 {padding-top: .2rem;}
.pt-(xs,sm,md,lg)-100 {padding-top: 1rem;}
padding-right (0-100)
.pr-(xs,sm,md,lg)-0 {padding-right: 0;}
.pr-(xs,sm,md,lg)-16 {padding-right: .16rem;}
.pr-(xs,sm,md,lg)-20 {padding-right: .2rem;}
.pr-(xs,sm,md,lg)-100 {padding-right: 1rem;}
padding-bottom (0-100)
.pb-(xs,sm,md,lg)-0 {padding-bottom: 0;}
.pb-(xs,sm,md,lg)-16 {padding-bottom: .16rem;}
.pb-(xs,sm,md,lg)-20 {padding-bottom: .2rem;}
.pb-(xs,sm,md,lg)-100 {padding-bottom: 1rem;}
padding-left (0-100)
.pl-(xs,sm,md,lg)-0 {padding-left: 0;}
.pl-(xs,sm,md,lg)-16 {padding-left: .16rem;}
.pl-(xs,sm,md,lg)-20 {padding-left: .2rem;}
.pl-(xs,sm,md,lg)-100 {padding-left: 1rem;}
margin (0-100)
.m-(xs,sm,md,lg)-0 {margin: 0;}
.m-(xs,sm,md,lg)-16 {margin: .16rem;}
.m-(xs,sm,md,lg)-20 {margin: .2rem;}
.m-(xs,sm,md,lg)-100 {margin: 1rem;}
margin-top (0-100)
.mt-(xs,sm,md,lg)-0 {margin-top: 0;}
.mt-(xs,sm,md,lg)-16 {margin-top: .16rem;}
.mt-(xs,sm,md,lg)-20 {margin-top: .2rem;}
.mt-(xs,sm,md,lg)-100 {margin-top: 1rem;}
margin-right (0-100)
.mr-(xs,sm,md,lg)-0 {margin-right: 0;}
.mr-(xs,sm,md,lg)-16 {margin-right: .16rem;}
.mr-(xs,sm,md,lg)-20 {margin-right: .2rem;}
.mr-(xs,sm,md,lg)-100 {margin-right: 1rem;}
margin-bottom (0-100)
.mb-(xs,sm,md,lg)-0 {margin-bottom: 0;}
.mb-(xs,sm,md,lg)-16 {margin-bottom: .16rem;}
.mb-(xs,sm,md,lg)-20 {margin-bottom: .2rem;}
.mb-(xs,sm,md,lg)-100 {margin-bottom: 1rem;}
margin-left (0-100)
.ml-(xs,sm,md,lg)-0 {margin-left: 0;}
.ml-(xs,sm,md,lg)-16 {margin-left: .16rem;}
.ml-(xs,sm,md,lg)-20 {margin-left: .2rem;}
.ml-(xs,sm,md,lg)-100 {margin-left: 1rem;}
border-radius (0-100)
.bdrs-(xs,sm,md,lg)-0 {border-radius: 0;}
.bdrs-(xs,sm,md,lg)-16 {border-radius: .16rem;}
.bdrs-(xs,sm,md,lg)-20 {border-radius: .2rem;}
.bdrs-(xs,sm,md,lg)-100 {border-radius: 1rem;}
width 采用 % 作为单位,并用 p 作为后缀 width (0p-100p)
.w-(xs,sm,md,lg)-0p {width: 0%;}
.w-(xs,sm,md,lg)-25p {width: 25%;}
.w-(xs,sm,md,lg)-50p {width: 50%;}
.w-(xs,sm,md,lg)-100p {width: 100%;}
line-height 采用倍数值 line-height (0、10-100)
.lh-(xs,sm,md,lg)-0 {line-height: 0;}
.lh-(xs,sm,md,lg)-10 {line-height: 1;}
.lh-(xs,sm,md,lg)-11 {line-height: 1.1;}
.lh-(xs,sm,md,lg)-12 {line-height: 1.2;}
.lh-(xs,sm,md,lg)-20 {line-height: 2;}
.lh-(xs,sm,md,lg)-100 {line-height: 10;}