使用sass/less的CSS'lookbehind'

Question

我目前正在使用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;
        }
    }
}

对我来说,这看起来很麻烦,很难在大型项目中维护.有没有人有更优雅的方法来实现这一目标？

Answer 1

您可以使用和号(&)引用父选择器,如下所示:

.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的精彩内容