stylus定义伪类函数在没有使用的情况下为每个元素应用上了效果

Question

vue文件代码如下：

<template>
    <header class="header_bar">
        <h1 class="app_title">标题</h1>
    </header>
</template>

<script>
export default {};
</script>

<style scoped lang="stylus">
@import '~assets/stylus/variable.styl'
@import '~assets/stylus/mixin.styl'
.header_bar
    position: relative
    display flex
    height 90px
    justify-content center
    align-items center
    color $brand-color

    .app_title
        margin-left 10px
</style>

mixin.styl代码如下：

extend-click()
    position: relative
      &:before
        content: ''
        position: absolute
        top: -10px
        left: -10px
        right: -10px
        bottom: -10px

运行结果：

在vue文件中并没有使用到mixin.styl中的函数~但是却因为引入了mixin.styl而导致顶部栏所有元素都被加上了扩展点击区域的伪类，想问下是怎么回事

Answer 1

后来测试发现空格和tab混用了，然后没设置好，导致&:before多了一个空格又看不到，所以才导致了所有标签都被加上了这个伪类