css - 手写笔不允许样式生效

Question

有人可以解释为什么会发生这种情况以及如何解决它吗？这是文件:

global-reset()

*
    box-sizing border-box
    font-size 16px
    font-family sans-serif

.header
        background #e1e1e1
        height 20em
    border-bottom 5px solid #000
    position relative

.header:before
    position absolute
        display block
        content ''
    border-bottom 5px solid red
    height 100%
        width 100%
        box-sizing border-box

.nav
    display flex
    align-items center
    justify-content flex-end
    padding-top 1em

    ul, li
        list-style none
        display inline
        margin-left 1em
        margin-right 1em

        a
            text-decoration none
            color #999

.title
    display flex
    align-items center
    justify-content center
    padding-top 2em

    h1
        padding-top 1em
        font-size 2em
        font-weight 600

.sub-title
    min-height 8em
    display flex
    align-items center
    justify-content center

    h2
        color #333

这是一个非常基本的手写笔文件，但出于某种奇怪的原因，.header 和 .header:before 部分中的底部边框样式没有生效。不过，背景颜色和显示对齐方式/填充的样式都很好。

Answer 1

我认为，根据您在“评论”答案中所写的内容以及您发布的内容，您应该查看空格。用空格替换所有制表符。 Stylus 是基于空格的，因此同时使用制表符和空格会让你的生活很痛苦。