CSS 'lookbehind‘使用sass / less

Question

我目前正在使用sass来帮助构建我的CSS。下面给出了一个琐碎的例子。

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

不过，我也在使用CSS3 (http://modernizr.com/docs/)，并希望在可能的情况下使用它。在本例中，我想测试border-radius的可用性，并使用border-radius而不是背景图像。因此，我需要检查html元素上是否存在borderradius类。有没有可能通过某种形式的回顾来实现这一点？或者，我是否必须使用.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;
}

请查看this article或this one，更深入地了解这一功能的用处：

Sass ...you可以在选择器声明的末尾放置一个与号(&)字符来代替重复的选择器，然后坐下来享受

的强大之处