有没有办法为某个选择器确定css规则的范围

Question

我目前正在写下所有的css选择器，但这看起来很难看。

.selector1 .selector2 .item1 {
    ...
}

.selector1 .selector2 .item2 {
    ...
}

.selector1 .selector2 .item3 {
    ...
}

制作这样的东西不是更好：

.selector1 .selector2 {

    .item1 {
       ...
    }

    .item2 {
        ...
    }

    .item3 {
        ...
    }
}

我知道样式标记中的scoped属性，但对我而言，这是另一种内联方式。有人知道这种范围是否可用吗？

Answer 1

使用Sass！他们实现了它:) http://sass-lang.com/

Answer 2

CSS不支持此语法，但有两种流行的CSS预编译器：LESS和SASS。编译器几乎没有任何差异。 SASS使用基于Ruby的编译器，LESS使用JavaScript编译器，这在我看来更容易处理，因为我不开发Ruby而是JavaScript。

此外，您可以在HTML代码中直接嵌入较少的文件

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>

当然，您需要可以从LESS网站下载的JavaScript编译器。并且应该在启动网站之前将LESS文件编译成普通的CSS。

您应该查看LESS documentation about nesting。