Generated by SassMeister.com.

SassMeister-input-HTML.html

<table>
   <thead>
       <tr>
         <th width="50px">Nom</th>
         <th>Âge</th>
         <th>Pays</th>
     </tr>
   </thead>
   <tbody>
     <tr>
         <td class="selected"><img src="http://www.patagonianinternationalmarathon.com/assets/Logo_Gatorade-03.png"/></td>
         <td>Gatorate - Drink of the mega champion of the world</td>
         <td><a href="http://stackoverflow.com/questions/25728462/bem-class-chainability">http://stackoverflow.com/questions/25728462/bem-class-chainability</a></td>
     </tr>
     <tr>
         <td><img src="http://kicksaddict.com/wp-content/uploads/2014/02/nike-inc_-logo.jpg" /></td>
         <td>Nike - the wearable talent</td>
         <td><a href="http://my.mail.ru/mail/ara-sargsyan/photo/_myphoto/">http://my.mail.ru/mail/ara-sargsyan/photo/_myphoto/</a></td>
     </tr>
   </tbody>
</table>

SassMeister-input.scss

// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----

/*------------------------------------*\
  VARIABLE
\*------------------------------------*/
$UI_sizing_ratio: 1.2;

$UI_size: (
  tiny 1 / $UI_sizing_ratio / $UI_sizing_ratio,
  small 1 / $UI_sizing_ratio,
  regular 1, 
  medium 1 * $UI_sizing_ratio, 
  large 1 * $UI_sizing_ratio * $UI_sizing_ratio
);

$UI_state: (
  default #73C4F2,
  warning #FFAA4A,
  error #F51F21,
  success #00C55D
);

$base-font-size: 14px;
$base-line-height: 1.57142857143;
$base-radius: 3px;
$button-radius: $base-radius;
$form-radius: $base-radius;


/*------------------------------------*\
  BASE
\*------------------------------------*/
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

html, body {
  font-family: DIN;
  font-weight: regular;
  font-size: $base-font-size;
  line-height: $base-line-height;
}

button, input, optgroup, select, textarea {
  margin: 0;
  font: inherit;
  color: inherit;
  line-height: 1.57142857143;
}


/*------------------------------------*\
  MIXIN
\*------------------------------------*/
@function strip-unit($num) {
  @return $num / ($num * 0 + 1);
}

@mixin rem($property, $values...) {
  $max: length($values);
  $pxValues: '';
  $remValues: '';

  @for $i from 1 through $max {
    $value: strip-unit(nth($values, $i));
    $pxValues: #{$pxValues + $value * $base-font-size};

    @if $i < $max {
      $pxValues: #{$pxValues + " "};
    }
  } 

  @for $i from 1 through $max {
    $value: strip-unit(nth($values, $i));
    $remValues: #{$remValues + $value}rem;

    @if $i < $max {
      $remValues: #{$remValues + " "};
    }
  } 

  #{$property}: $pxValues; 
  #{$property}: $remValues;
}

@mixin mm($modifier, $extend-from-parent: false) {
  @at-root {
    $selector: nth(&, 1);
    $direct-parent: nth($selector, length($selector));
    @if $extend-from-parent == true {
      #{$direct-parent}--#{$modifier} { @extend #{$direct-parent}; }
    }
    #{&}--#{$modifier} { @content; }
  }
}


table {
  text-align: left;
  table-layout:fixed;
  width: 500px;
  border: 2px solid #eee;
  border-collapse: collapse;
  vertical-align:middle;
  img {
    max-height: 20px;
    max-width: 50px;
    vertical-align:middle;
  }
  
  thead {
    tr {
      background: #eee;
      th {
        font-size: 12px;
        padding: 6px 12px;
        color: #727272;
        font-weight: normal;
        &.selected {
          font-weight: bold; 
        }
      }
    }  
  }
  
  
  tbody {
    tr {
      
      &:hover {
        background: #F6F6F6;
      }
      
      td {
        padding: 6px 12px;
        overflow:hidden;
        text-overflow:ellipsis; 
        white-space:nowrap;
        color: #464646;
      }
    }
  }
  
}

SassMeister-output.css

/*------------------------------------*\
  VARIABLE
\*------------------------------------*/
/*------------------------------------*\
  BASE
\*------------------------------------*/
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

html, body {
  font-family: DIN;
  font-weight: regular;
  font-size: 14px;
  line-height: 1.57143;
}

button, input, optgroup, select, textarea {
  margin: 0;
  font: inherit;
  color: inherit;
  line-height: 1.57142857143;
}

/*------------------------------------*\
  MIXIN
\*------------------------------------*/
table {
  text-align: left;
  table-layout: fixed;
  width: 500px;
  border: 2px solid #eee;
  border-collapse: collapse;
  vertical-align: middle;
}
table img {
  max-height: 20px;
  max-width: 50px;
  vertical-align: middle;
}
table thead tr {
  background: #eee;
}
table thead tr th {
  font-size: 12px;
  padding: 6px 12px;
  color: #727272;
  font-weight: normal;
}
table thead tr th.selected {
  font-weight: bold;
}
table tbody tr:hover {
  background: #F6F6F6;
}
table tbody tr td {
  padding: 6px 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #464646;
}

SassMeister-rendered.html

<table>
   <thead>
       <tr>
         <th width="50px">Nom</th>
         <th>Âge</th>
         <th>Pays</th>
     </tr>
   </thead>
   <tbody>
     <tr>
         <td class="selected"><img src="http://www.patagonianinternationalmarathon.com/assets/Logo_Gatorade-03.png"/></td>
         <td>Gatorate - Drink of the mega champion of the world</td>
         <td><a href="http://stackoverflow.com/questions/25728462/bem-class-chainability">http://stackoverflow.com/questions/25728462/bem-class-chainability</a></td>
     </tr>
     <tr>
         <td><img src="http://kicksaddict.com/wp-content/uploads/2014/02/nike-inc_-logo.jpg" /></td>
         <td>Nike - the wearable talent</td>
         <td><a href="http://my.mail.ru/mail/ara-sargsyan/photo/_myphoto/">http://my.mail.ru/mail/ara-sargsyan/photo/_myphoto/</a></td>
     </tr>
   </tbody>
</table>