如何在Sass中编写css规则？

Question

如何在sass中简短地写这个css规则？

.w_50 .grid li .player .approved,.w_51 .grid li .player .approved{margin: 3px 3px 6px 9px;}

Answer 1

简单的答案，你不能，不是真的。像SASS这样的东西的优点是你可以忽略一遍又一遍地重复相同的事情，但是对于单一的CSS样式规则来说，几乎没有什么优势。你能做的最多的是：

.w_50, .w_51 {
    .grid li .player .approved { margin: 3px 3px 6px 9px; }
}

但很难说这更短。 SASS变得有用的地方是嵌套属性并在其中定义样式，因此您不必重复自己。例如：

article {
    padding: 20px;
    h1 { color: red; }
    p { margin-bottom: 20px; }
}

这将输出：

article { padding: 20px; }
article h1 { color: red; } 
article p { margin-bottom: 20px; }

但是，再次，这里没有付出太多努力，但你可以看到当你嵌套更多的东西，或者当你的样式表变得庞大时，你不必须重复写{{1在每条规则面前。最重要的是，SASS（以及LESS）允许一些简单的逻辑来重复，或者使用变量（这样可以轻松地更改颜色方案，而无需查找颜色的每个实例）。

在sass-lang.com上阅读SASS，了解预处理器可为您提供的实际 主要改进。