Question

我使用定位Mixins将我的div对齐到页面的顶部或左侧或中心等，它可以与SCSS和Sass一起使用，但出于某种原因，当我尝试使用Stylus时，它表现得非常奇怪。 / p>

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

我的Mixin示例：

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

Editable demo of the buggy code

一些理论：

它是否结合了我的声明？
手写笔无法告诉我正在呼叫哪个Mixin？

提前感谢您的帮助！

Answer 1

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

中使用它

left 0 -> left(0)

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

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

Stylus CSS Mixin不工作

2 个答案: