sacss

/* * # 命名规则 * 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