CSS工具类

1像素边框

// 初始化公用属性
.border-top-1px, .border-right-1px, .border-bottom-1px, .border-left-1px
  position: relative
  &::before, &::after
    content: ""
    display: block
    position: absolute
    transform-origin: 0 0

// 上边框
.border-top-1px
  &::before
    border-top: 1PX solid #ddd
    left: 0
    top: 0
    width: 100%
    transform-origin: 0 top

// 右边框
.border-right-1px
  &::after
    border-right: 1PX solid $color-col-line
    top: 0
    right: 0
    height: 100%
    transform-origin: right 0

// 下边框
.border-bottom-1px
  &::after
    border-bottom: 1PX solid #ddd
    left: 0
    bottom: 0
    width: 100%
    transform-origin: 0 bottom

// 左边框
.border-left-1px
  &::before
    border-left: 1PX solid $color-col-line
    top: 0
    left: 0
    height: 100%
    transform-origin: left 0

// 适配dpr不用的屏幕
@media (min-resolution: 2dppx)
  .border-top-1px
    &::before
      width: 200%
      transform: scale(.5) translateZ(0)
  .border-right-1px
    &::after
      height: 200%
      transform: scale(.5) translateZ(0)
  .border-bottom-1px
    &::after
      width: 200%
      transform: scale(.5) translateZ(0)
  .border-left-1px
    &::before
      height: 200%
      transform: scale(.5) translateZ(0)

@media (min-resolution: 3dppx)
  .border-top-1px
    &::before
      width: 300%
      transform: scale(.333) translateZ(0)
  .border-right-1px
    &::after
      height: 300%
      transform: scale(.333) translateZ(0)
  .border-bottom-1px
    &::after
      width: 300%
      transform: scale(.333) translateZ(0)
  .border-left-1px
    &::before
      height: 300%
      transform: scale(.333) translateZ(0)

当行文本溢出隐藏

// 需要当前元素的宽度
.no-wrap
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap

清楚浮动

  .clearfix::after
    clear:both
  .clearfix::after, .clearfixe::before
    display: table
    content: ''