Амперсанд (&) в конце и часть селектора в SASS

У меня есть проблема, с которой я борюсь. У меня есть этот миксин (это попытка портировать меньше на sass):

@mixin button-variant($color, $background, $border)
    {
        ...
        .foreverAlone{
            ...
        }

        .iThink .illNeverWork& {

            color: $pinkUnicornRainbow;
            ...
        }
  }

Что, очевидно, не работает: D Я бы хотел, чтобы он генерировал что-то вроде:

.callerClass .foreverAlone{
    ...
} 

.callerClass .iThink .illNeverWork.callerClass{

    color: #123ABC;
    ...
}

Mixin вызывается внутри различных классов div, поэтому его невозможно сделать статическим (легко).

Есть ли обходной путь от какого-нибудь Sass pro (или не pro, но умнее меня)? Спасибо всем за внимание и за то, что поделились своими решениями.


css sass ampersand porting
person Edoardoo    schedule 19.03.2014    source источник

Ответы (1)


arrow_upward
15
arrow_downward

Для Sass версии 3.2 и старше это все допустимые способы использования родительского селектора:

.foo {
    &, &.bar, &#bar, &:after, &[active] {
        color: red;
    }
}

.foo {
    .bar & {
        color: red;
    }
}

Начиная с Sass 3.3, это действительно:

.foo {
    &bar, &-bar {
        color: red;
    }
}

Начиная с Sass 3.4, это действительно:

.foo {
    $foo: &;
    @at-root bar#{&} {
        color: red;
    }
}
person cimmanon    schedule 19.03.2014