我如何将这段代码重构为 sass？

Question

#table_1 
tr:nth-child(odd) td:nth-child(even),
#table_1 
tr:nth-child(even) td:nth-child(odd)
background: #ccc
background: -moz-linear-gradient(top, #ccc, #eee)
background: -webkit-gradient(linear,0 0, 0 100%, from(#ccc), to(#eee))
box-shadow: inset 0 0 10px rgba(0,0,0,.4)
-moz-box-shadow: inset 0 0 10px rgba(0,0,0,.4)
-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,.4)

我想把它变成没有任何分号的 sass，这样它就能在 compass 中编译。

到目前为止，我收到以下错误："Properties are only allowed within rules, directives, mixin includes, or other properties."

代码无法编译。

Answer 1

这是 SASS 嵌套的便捷指南：http://sass-lang.com/guide#topic-3

#table_1 
  tr:nth-child(odd)
    tr:nth-child(even)
      width: 100%
  tr:nth-child(even)
    tr:nth-child(odd)
      width: 100%

应该生成：

#table_1 tr:nth-child(odd) tr:nth-child(even) {
  width: 100%;
}

#table_1 tr:nth-child(even) tr:nth-child(odd) {
  width: 100%;
}

http://www.sassmeister.com/gist/55fc83f073a05ec581b0

编辑：

为背景和边框半径添加几个混合：

=bg($start, $end)
  background: $start
  background: -moz-linear-gradient(top, $start, $end)
  background: -webkit-gradient(linear,0 0, 0 100%, from($start), to($end))
=shadow($distance, $opacity)
  box-shadow: inset 0 0 $distance rgba(0,0,0,$opacity)
  -moz-box-shadow: inset 0 0 $distance rgba(0,0,0,$opacity)
  -webkit-box-shadow: inset 0 0 $distance rgba(0,0,0,$opacity)

#table_1
  tr:nth-child(odd)
    tr:nth-child(even)
      +bg(#ccc,#eee)
      +shadow(10px,.4)
  tr:nth-child(even)
    tr:nth-child(odd)
      +bg(#ccc,#eee)
      +shadow(10px,.4)

我如何将这段代码重构为 sass？

How would I refactor this bit of code into sass?

css

sass

compass