title: Overriding <tr> styling for <td> using sass
body: <p>I'm currently working on a rails application where I want to highlight a row with a background colour, but in addition to that, within that row highlight a data cell with a different colour.</p>
  
  <p>The problem I have is the styling for the td appears to be ignored. I just get the background colour for the whole row.</p>
  
  <p>Inspecting the css client side it appears that the styling I apply for the td simply isn't there.</p>
  
  <p><strong>The generated html</strong></p>
  
  <pre><code>&lt;table id="project-table" class="table table-hover"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Row&lt;/th&gt;
        &lt;th&gt;Fubar&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
  
    &lt;tbody&gt;
      &lt;tr class="clickable-row cheese"&gt;
        &lt;td&gt;Row 1&lt;/td&gt;
        &lt;td class="'wibble'"&gt;Hello World&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>The sass</strong></p>
  
  <pre><code>#project-table tbody tr.cheese {
    background-color: yellow;
  
    &amp; td.wibble {
      background-color: blue;
    }
  }
  </code></pre>
  
  <p>What am I doing wrong?</p>
  
  <p>ps: using bootstrap 3 but I don't think that's relevant to this issue, is it?</p>
  
  <p><strong>UPDATE [SOLVED]</strong></p>
  
  <p>Ok, it appears I was being blind and hadn't realised an extra set of double quotes were being generated for <code>class="'wibble'"</code> - thanks to @Dekel for quickly pointing that out, and allowing me to find the cause of the real issue.</p>
  
  <p>To solve the issue of the generation of extra quotes I had to mark the output as html_safe:</p>
  
  <pre><code>&lt;td&lt;%= ((index == @project.active_pattern_index) ? ' class="wibble"' : '').html_safe %&gt;&gt;
    &lt;%= pattern.row(count).instruction %&gt;
  &lt;/td&gt;
  </code></pre>