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

Question

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

.selector1 .selector2 .item1 {
    ...
}

.selector1 .selector2 .item2 {
    ...
}

.selector1 .selector2 .item3 {
    ...
}

做这样的事情不是更好吗：

.selector1 .selector2 {

    .item1 {
       ...
    }

    .item2 {
        ...
    }

    .item3 {
        ...
    }
}

我知道样式标签中的作用域属性，但对我来说这是另一种内联方式。有谁知道这种范围界定是否可用？

score 1 · Accepted Answer

1

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

于 2013-04-04T09:33:21.453 回答

score 1 · Accepted Answer

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

此外，您可以像这样在 HTML 代码中直接嵌入您的 less 文件

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

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

2 回答 2