/* 多行显示 */
// 多行省略
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
前端css mixin stylus汇总--持续更新
最新推荐文章于 2024-04-12 14:51:19 发布