Question

I am currently using sass to help structure my CSS. A trivial given below.

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

However I am also using modernizr (http://modernizr.com/docs/) and want to utilise CSS3 where possible. In this example I want to test for availability of border-radius , and use border-radius rather than a background image. Therefore I need to check for the presence of borderradius class on the html element. Is it possible to achieve this using some sort of look behind? Or do I have to repeat the code again with the .borderradius class, the end result being the following :

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

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

To me this looks messy and difficult to maintain in a large project. Does anyone have a more elegant ways of achieving this?

Answer 1

You can reference parent selectors using the ampersand (&), like this:

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

Which will compile to:

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

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

Check out this article, or this one for a more in-depth explanation of how useful this can be:

…you can place a trailing ampersand (&) character at the end of your selector declaration in place of the repeating selector, and sit back and enjoy the awesomeness of Sass