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

您可以使用＆符号（＆amp;）来引用父选择器，如下所示：

.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，了解更多有用的信息：

...你可以在选择器声明的末尾放置一个尾随的＆符号（＆amp;）代替重复选择器，然后坐下来享受Sass的精彩

使用sass / less的CSS'lookbehind'

1 个答案: