kathrynm kathrynm - 3 months ago 23
CSS Question

Stylus CSS Mixin Not Working

I use positioning Mixins for aligning my divs to the top or left or center of the page etc, it works fine with SCSS and 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:


  • It's combining my declarations?

  • Stylus can't tell which Mixin I'm calling?



Thanks in advance for any help!

Answer

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
Comments