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

Имам проблем, с който се боря. Имам този миксин (който е опит за пренасяне на малко по-малко към sass):

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

        .iThink .illNeverWork& {

            color: $pinkUnicornRainbow;
            ...
        }
  }

Което очевидно не работи :D Бих искал да генерира нещо като:

.callerClass .foreverAlone{
    ...
} 

.callerClass .iThink .illNeverWork.callerClass{

    color: #123ABC;
    ...
}

Миксинът се извиква в различни класове div, така че не е възможно да се направи статичен (лесно).

Има ли някакво решение от някой Sass професионалист (или не професионалист, но по-умен от мен)? Благодаря на всички за вниманието и споделянето на вашите решения.


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