Stylus CSS Mixin не работает

Я использую позиционирование Mixins для выравнивания моих divs в верхней или левой или центральной части страницы и т. Д., Он отлично работает с SCSS и Sass, но по какой-то причине он ведет себя очень странно, когда я пытаюсь использовать Stylus.Stylus CSS Mixin не работает

Если я включил один Mixin, он отлично работает, но когда я добавлю больше Mixins ниже, он по умолчанию будет использовать другой Mixin.

Пример моего Mixin:

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

Editable demo of the buggy code

Некоторые теории:

Это сочетающие мои заявления?
Стилус не может сказать, какой Миксин я звоню?

Заранее благодарим за любую помощь!

источник

2016-08-15 meow-meow-meow

Почему оба 'right' и' left' равны '0' внутри' top() '? Не должно ли 'top()' иметь только 'top 0'? –

это мой хакерский способ позиционирования вещей, если вы хотите, чтобы что-то было выровнено сверху, вы опускаете дно, если вы хотите, чтобы что-то выровнялось влево, вы опускаете право, если хотите, чтобы он был центрирован, вы держите их всех –

Вам не хватает индикатора 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

источник

2016-08-15 18:10:32

Нет, ' '' не требуется для микширования. – Panya

@Panya - Тогда почему это работает сейчас? http://codepen.io/anon/pen/akXApX?editors=1100 –

, потому что '-left' не используется в' -top' mixin. См. Мой ответ ниже. – Panya

Проблема transparent mixins. Вы определения left() подмешать и использовать его в top() Mixin:

left 0 -> left(0)

Это хорошая практика, чтобы не использовать имена свойств CSS в качестве имен Mixins в Stylus.

источник

2016-08-15 19:34:21 Panya

Это также исправляло ошибку, спасибо @Panya - я хотел бы отметить галочку как –

Прозрачные миксины - настоящая причина, которая вызывает эту ошибку. Ответ от @ J.Titus - это всего лишь обходной путь :) – Panya

Stylus CSS Mixin не работает

ответ

Смежные вопросы