cssmixinsstylus

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


I use a positioning Mixins for aligning my divs to the top or left or center of the page etc, it works fine with SCSS/Sass but for some reason it's behaving very strangely when I try to use Stylus.

If I include one Mixin it works fine but when I add in more Mixins below, it will default to another Mixin.

Example of my Mixin:

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

Editable demo of the buggy code

Some theories:


Solution

  • You're missing the mixin indicator -. This should work for you:

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