How would I refactor this bit of code into 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)

I am looking to turn this into sass without any semi-colons, and so that it will compile in compass.

So far I get the following error: "Properties are only allowed within rules, directives, mixin includes, or other properties."

The code will not compile.

What do you mean "Without any semi-colons?" Also, these are just two selectors. What CSS do you want to get rendered? — omninonsense, Dec 22 '15 at 10:42
May I ask why you have chosen `sass` over `scss`? As `scss` you could use compass without these issues. Your issue is likely due to indentation errors. — DavidT, Dec 22 '15 at 10:47
I just added the rest. And by no semi-colons, I mean the syntactical form of sass that does not involve any ";" in the code and uses purely indentation. — Edward K., Dec 22 '15 at 10:47

Jamie Barker · Accepted Answer · 2015-12-22T11:32:35.690

Here's a handy guide to SASS nesting: 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%

should generate:

#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

EDIT:

Add a couple of mixins for the background and border radius:

=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)

Congrats, this works. I only had to change a couple things and now it is compiling: #table_1 tr:nth-child(odd) tr:nth-child(even) width: 100% #table_1 tr:nth-child(even) tr:nth-child(odd) width: 100% — Edward K., Dec 22 '15 at 11:01

How would I refactor this bit of code into sass?

1 Answers1