为什么我的定位混合在 Stylus 中与 Sass 一起工作时却不能工作？

Question

我使用定位 Mixins 将我的 div 对齐到页面的顶部、左侧或中心等，它与 SCSS/Sass 一起工作正常，但由于某种原因，当我尝试使用 Stylus 时它的行为非常奇怪。

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

我的 Mixin 示例：

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

Editable demo of the buggy code

一些理论：

它在合并我的声明？
Stylus 无法判断我在调用哪个 Mixin？

Answer 1

您缺少混合指标 -。这应该适合你：

// 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

Answer 2

问题是transparent mixins。您正在定义 left() mixin 并在 top() mixin 中使用它：

left 0 -> left(0)

最好不要在 Stylus 中使用 CSS 属性名称作为 mixin 的名称。

为什么我的定位混合在 Stylus 中与 Sass 一起工作时却不能工作？

Why isn't my positioning mixin working in Stylus when it works with Sass?

css

mixins

stylus