【Sass】1px分割线 + 缩进分割线

效果图

1. 亮色模式效果

2. 暗色模式效果

设计思路

1. 配色使用grey色
   • 优点：无论在暗色模式还是亮色模式都可以看清楚分割线
2. 使用after,before 伪元素绘制线条，并压缩线条transform: scaleY(.25)

注意事项

1. 必须确保父级有宽高
2. 父级定位必须为position: relative

Sass代码

码

// 顶部分割线  
.mini-heriz
    &::after
        position: absolute
        right: 0
        top: 0
        content: ''
        width: 100%
        height: 1px
        transform: scaleY(.25)
        background: grey

// 顶部缩进分割线  
.mini-heriz-inset
    &::after
        @extend .mini-heriz
        width: 90%
        left: 5%

// 底部分割线  
.mini-heriz-bottom
    &::before
        position: absolute
        right: 0
        bottom: 0
        content: ''
        width: 100%
        height: 1px
        transform: scaleY(.25)
        background: grey


// 底部缩进分割线  
.mini-heriz-bottom-inset
    &::before
        @extend .mini-heriz-bottom
        width: 90%
        left: 5%