CSS «lookbehind» с использованием sass/less

В настоящее время я использую sass, чтобы структурировать свой CSS. Тривиальное, приведенное ниже.

.container {
    .list {
        .selected {
            background-image : url('highlighted.png');
        }
    }
}

Однако я также использую modernizr (http://modernizr.com/docs/) и хочу использовать CSS3 там, где возможно. В этом примере я хочу проверить наличие border-radius и использовать border-radius вместо фонового изображения. Поэтому мне нужно проверить наличие класса borderradius в элементе html. Можно ли добиться этого, используя какой-то вид сзади? Или мне нужно снова повторить код с классом .borderradius, конечный результат будет следующим:

.container {
    .list {
        .selected {
            background-image : url('highlighted.png');
        }
    }
}

.borderradius .container {
    .list {
        .selected {
            background : yellow;
            border-radius : 10px;
        }
    }
}

Для меня это выглядит грязно и сложно поддерживать в большом проекте. У кого-нибудь есть более элегантные способы достижения этого?


css sass less modernizr
person dannym    schedule 05.02.2013    source источник

Ответы (1)


arrow_upward
12
arrow_downward

Вы можете ссылаться на родительские селекторы, используя амперсанд (&), например:

.container {
    .list {
        .selected {
            background-image : url('highlighted.png');
            .borderradius & {
                background : yellow;
                border-radius : 10px;
            }
        }
    }
}

Который будет скомпилирован в:

.container .list .selected { 
    background-image : url('highlighted.png');
}

.borderradius .container .list .selected {
    background : yellow;
    border-radius : 10px;
}

Ознакомьтесь с этой статьей или это для более подробного объяснения того, насколько это может быть полезно:

... вы можете поместить завершающий символ амперсанда (&) в конце объявления вашего селектора вместо повторяющегося селектора и расслабиться и наслаждаться удивительным Sass

person CherryFlavourPez    schedule 05.02.2013
comment
Спасибо, что здесь означает &? Любой элемент выше по дереву? - person dannym; 05.02.2013
comment
'&' сообщает SASS о том, что весь родительский селектор должен быть перемещен туда, куда вы его поместите. Итак, в этом примере это становится «.container .list .selected». - person CherryFlavourPez; 05.02.2013