2

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

在我看来，这在大型项目中看起来很混乱且难以维护。有没有人有更优雅的方法来实现这一目标？

4

1 回答 1

12

您可以使用与号 (&) 引用父选择器，如下所示：

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

于 2013-02-05T11:37:01.847 回答