手写笔CSS Mixin不起作用

Question

我使用定位Mixins将div对齐到页面的顶部或左侧或中心，等等，它在SCSS和Sass上都能正常工作，但是由于某些原因，当我尝试使用Stylus时，它的表现非常奇怪。

如果我包含一个Mixin，它可以正常工作，但是当我在下面添加更多Mixin时，它将默认为另一个Mixin。

我的Mixin示例：

top()
   position absolute
   margin auto
   top 0
   right 0
   //bottom 0
   left 0

越野车代码的可编辑演示

一些理论：

• 结合我的声明了吗？
• 触控笔无法识别我正在呼叫哪个Mixin？

在此先感谢您的帮助！

Answer 1

问题是透明的mixins 。 您要定义left()混合，并在top()混合中使用它：

left 0 -> left(0)

最好不要将CSS属性名称用作Stylus中的混合名称。

Answer 2

您缺少mixin指示器- 。 这应该为您工作：

// this is the mixin I'm calling, it positions the div to the top   
-top()
    position: absolute
    margin: auto
    top: 0
    right: 0
    left: 0

// for some reason the div is defaulting to this mixin instead
-center()
    position: absolute
    margin: auto
    top: 0
    right: 0
    bottom: 0   
    left: 0

// if you comment this block out it will work normally, calling the top() mixin only
-left()
    position: absolute
    margin: auto
    top: 0
    bottom: 0
    left: 0

// my div calling top() 
.block
    -top()  
    background: #345
    width: 100px
    height: 100px