/*
  * # 命名规则
  * 1. 只取首字母 `.db{ display:block }`
  * 2. 有数字直接连接 `.mb10{ margin-bottom:10px }`
  * 3. 百分号用 `\%` 表示 `.w100\%{ width:100% }`
  * 4. 小数点用 `\.` 表示 `.lh1\.2{ line-height:1.2}`
  * 5. 有想要自定义的样式，用 `\:`分割  `.c\:fff{ color:#fff }`
  * 6. hover 样式，用 `\:`分割  `.db\:h:hover{ display:block }`
  */

$percent = '\%'

$dot = '\.'

WidthPrefix($prefix = '')
  .{$prefix}aic
    align-items: center
  .{$prefix}aife
    align-items: flex-end
  .{$prefix}aifs
    align-items: flex-start
  .{$prefix}b0
    bottom: 0
  .{$prefix}bct
    background-color: transparent
  .{$prefix}bn
    border: none
  .{$prefix}br0
    border-radius: 0
  .{$prefix}br100{$percent}
    border-radius: 100%
  .{$prefix}bsbb
    box-sizing: border-box
  .{$prefix}bc_fff
    background-color: #fff
  .{$prefix}bc_000
    background-color: #000
  .{$prefix}c_000
    color: #000
  .{$prefix}c_fff
    color: #fff
  .{$prefix}cb
    clear: both
  .{$prefix}cp
    cursor: pointer
  .{$prefix}db
    display: block
  .{$prefix}df
    display: flex
  .{$prefix}di
    display: inline
  .{$prefix}dib
    display: inline-block
  .{$prefix}dif
    display: inline-flex
  .{$prefix}dn
    display: none
  .{$prefix}dt
    display: table
  .{$prefix}dtc
    display: table-cell
  .{$prefix}f1
    flex: 1
    min-width: 0
  .{$prefix}fa
    flex: auto
  .{$prefix}fdc
    flex-direction: column
  .{$prefix}fdr
    flex-direction: row
  .{$prefix}fi
    font: inherit
  .{$prefix}fl
    float: left
    *display: inline
  .{$prefix}fr
    float: right
  .{$prefix}fs0
    font-size: 0
  .{$prefix}fs1
    flex-shrink: 1
  .{$prefix}fsi
    font-style: italic
  .{$prefix}fsn
    font-style: normal
  .{$prefix}fvsc
    font-variant: small-cap
    text-transform: lowercase
  .{$prefix}fw100
    font-weight: 100
  .{$prefix}fw200
    font-weight: 200
  .{$prefix}fw300
    font-weight: 300
  .{$prefix}fw400
    font-weight: 400
  .{$prefix}fw500
    font-weight: 500
  .{$prefix}fw600
    font-weight: 600
  .{$prefix}fw700
    font-weight: 700
  .{$prefix}fw800
    font-weight: 800
  .{$prefix}fw900
    font-weight: 900
  .{$prefix}fwn
    font-weight: normal
  /* 重名所以忽略掉不常用的 */
  //.fwn flex-wrap: nowrap }
  .{$prefix}fww
    flex-wrap: wrap
  .{$prefix}h100{$percent}
    height: 100%
  .{$prefix}jcc
    justify-content: center
  .{$prefix}jcfe
    justify-content: flex-end
  .{$prefix}jcsa
    justify-content: space-around
  .{$prefix}jcsb
    justify-content: space-between
  .{$prefix}l0
    left: 0
  .{$prefix}l100{$percent}
    left: 100%
  .{$prefix}l50{$percent}
    left: 50%
  .{$prefix}lh1
    line-height: 1
  .{$prefix}lh1{$dot}2
    line-height: 1.2
  .{$prefix}lh1{$dot}5
    line-height: 1.5
  .{$prefix}lh1{$dot}8
    line-height: 1.8
  .{$prefix}lsn
    list-style: none
  .{$prefix}m0
    margin: 0
  .{$prefix}mla
    margin-left: auto
  .{$prefix}mra
    margin-right: auto
  .{$prefix}mta
    margin-top: auto
  .{$prefix}mba
    margin-bottom: auto
  .{$prefix}o0
    opacity: 0
  .{$prefix}oa
    overflow: aut
    -webkit-overflow-scrolling: touch
  .{$prefix}oh
    overflow: hidden
  .{$prefix}p0
    padding: 0
  .{$prefix}pa
    position: absolute
  .{$prefix}pen
    pointer-events: none
  .{$prefix}pf
    position: fixed
  .{$prefix}pr
    position: relative
  .{$prefix}pt100{$percent}
    padding-top: 100%
  .{$prefix}r0
    right: 0
  .{$prefix}r100{$percent}
    right: 100%
  .{$prefix}t0
    top: 0
  .{$prefix}t100{$percent}
    top: 100%
  .{$prefix}t50{$percent}
    top: 50%
  .{$prefix}mw100{$percent}
    max-width: 100%
  .{$prefix}tac
    text-align: center
  .{$prefix}taj
    text-align: justify
  .{$prefix}tal
    text-align: left
  .{$prefix}tar
    text-align: right
  .{$prefix}tdn
    text-decoration: none
  .{$prefix}tdu
    text-decoration: underline
  .{$prefix}tlf
    table-layout: fixed
  .{$prefix}ttc
    text-transform: capitalize
  .{$prefix}ttl
    text-transform: lowercase
  .{$prefix}ttn
    text-transform: none
  .{$prefix}ttu
    text-transform: uppercase
  .{$prefix}usn
    user-select: none
  .{$prefix}vam
    vertical-align: middle
  .{$prefix}vat
    vertical-align: top
  .{$prefix}vh
    visibility: hidden
  .{$prefix}w100{$percent}
    width: 100%
  .{$prefix}wan
    -webkit-appearance: none
  .{$prefix}wsn
    white-space: nowrap
  .{$prefix}wwbw
    word-wrap: break-word
    word-break: break-all
  .{$prefix}zi1
    z-index: 1