前端css mixin stylus汇总--持续更新

/* 多行显示 */
// 多行省略
line-camp($clamp = 2)
  if ($clamp == 1)
    overflow hidden
    text-overflow ellipsis // 文本溢出显示省略号
    white-space nowrap // 文本不会换行（单行文本溢出）
  else
    overflow hidden
    text-overflow ellipsis
    display -webkit-box
    -webkit-line-clamp $clamp
    /* autoprefixer: off */
    -webkit-box-orient vertical
    /* autoprefixer: on */
// 文字效果
text-des-style($fontSize, $color, $lineHeight, $textAlign = left)
  if ($fontSize)
    font-size $fontSize
  if ($color)
    color $color
  if ($lineHeight)
    line-height $lineHeight
  text-align $textAlign
// 链接效果
hover-style($color, $hover, $decoration = none)
  text-decoration $decoration
  color $color
  &:hover
    color $hover
// 底部1px线
border-bottom-1px($width = 1px, $style = solid, $color = #000, $radius = 0px)
  &::before
    content ''
    pointer-events none
    display block
    position absolute
    left 0
    top 0
    transform-origin 0 0
    border-bottom $width $style $color
    border-radius $radius
    box-sizing border-box
    width 100%
    height 100%
    @media screen and (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2)
      width 200%
      height 200%
      border-radius $radius * 2
      transform scale(0.5)
    @media screen and (min-device-pixel-ratio: 3), (-webkit-min-device-pixel-ratio: 3)
      width 300%
      height 300%
      border-radius $radius * 3
      transform scale(0.33)
// 清除浮动
clearfix()
  &::after
    clear both
    content ''
    display block
    height 0
    line-height 0
    overflow hidden
// flex居中
flex-center($justify = center, $align = center)
  display flex
  justify-content $justify
  align-items $align