为什么设置混合宏 stylus 的border-1px 函数引入到到 App.vue下页面渲染无反应

来源：15-6 1像素border实现

Saber专属

2017-07-25

App.vue下
<style lang="stylus" rel="stylesheet/stylus" type="text/stylus">
 // 混合宏样式引入
 @import "./common/stylus/mxin.styl"

 .tab
 display: flex
 width: 100%
    height: 40px
 line-height: 40px
 // border-bottom: 1px solid rgba(7,17,27,0.1)
 border-1px(rgba(7, 17, 27, 0.1))
    flex-direction row
 .tab-item
 flex: 1
 text-align center
 & > a
 display: block
 text-decoration: none
 font-size: 14px
 color: rgb(77, 85, 95)
        &.active
 color: rgb(240, 20, 20)
</style>

mixin.styl文件
/**
 混合宏 ，sass语法设置函数
 */

border-1px($color)
  position: relative
  &: after
    display: block
    position: absolute
    left: 0
    bottom: 0
    width: 100%
    border-top: 1px solid $color
    content: ' '

写回答

2回答