Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="trustyou-ui table-wrapper">
		<table class="trustyou-ui table table-striped">
			<thead>
				<tr>
					<th class="item-title is-sortable">Group name <a class="sort-by"><i class="ty-icon ty-icon-caret-up"></i></a></th>
					<th class="is-sortable">Performance <a class="sort-by"><i class="ty-icon ty-icon-caret-up"></i></a></th>
					<th class="is-sortable">Performance <span class="th-subtitle">Comp Index</span> <a class="sort-by"><i class="ty-icon ty-icon-caret-up"></i></a></th>
					<th class="is-sortable">New reviews <a class="sort-by"><i class="ty-icon ty-icon-caret-up"></i></a></th>
					<th class="is-sortable">Response rate <a class="sort-by"><i class="ty-icon ty-icon-caret-up"></i></a></th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td class="item-title">Welt - Ibis (1,012)</td>
					<td>84</td>
					<td>1.25</td>
					<td>270</td>
					<td>24%</td>
				</tr>
				<tr>
					<td class="item-title">Welt - Marriott (522)</td>
					<td>84</td>
					<td>1.25</td>
					<td>270</td>
					<td>24%</td>
				</tr>
				<tr>
					<td class="item-title">World - Crowne Plaza (375)</td>
					<td>84</td>
					<td>1.25</td>
					<td>270</td>
					<td>24%</td>
				</tr>
				<tr>
					<td class="item-title">Worldwide - Pullman (91)</td>
					<td>84</td>
					<td>1.25</td>
					<td>270</td>
					<td>24%</td>
				</tr>
				<tr>
					<td class="item-title">Central Europe - Mercure (123)</td>
					<td>84</td>
					<td>1.25</td>
					<td>270</td>
					<td>24%</td>
				</tr>
			</tbody>
		</table>
	</div>

SassMeister-input.scss

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

@import "compass/css3";

$gray-dark: #e5e5e5;
$gray-light: #fafafa;
$dark: #333;
$blue: #3498db;
$green: #7cb342;
$orange: #ffa726;
$red: #f06748;

.table-wrapper {
  width: 600px; 
}

.table {
	@include box-shadow(none);
	font-family: Arial, Helvetica, sans-serif;
	border: none;
	border-bottom: 1px solid $gray-dark;
	min-width: 100%;
	border-collapse: separate;
	border-spacing: 0;

	tr {
		position: relative;
		white-space:nowrap;

		th, td {
			width: auto;
			margin: 0;
			text-align: center;
			height: 100%;
			font-size: 13px;
			line-height: normal;
			vertical-align: top;

			&.l-align-left {
				text-align: left;
			}

			&.l-align-right {
				text-align: right;
			}

			&.l-multiline {
				white-space: normal;
			}
		}

		td.item-options,
		th.item-options {
			float: none;
			min-height: none;

			a {
				@include transition(color .1s ease-in-out);
				color: #aaa;
				cursor: pointer;
				display: inline-block;
				margin-left: 2px;
				text-decoration: none;

				&:first-child {
					margin-left: 0;
				}

				&:hover {
					color: #666;
				}

				&:active {
					color: #333;
				}
			}
		}

		td.item-title,
		th.item-title {
			float: none;
			min-height: initial;
			min-width: 300px;
			text-align: left;
		}

		th {
			@include transition(background-color .1s ease-in-out);
			background-color: darken($gray-light, 4%);
			border-bottom: 1px solid $gray-dark;
			font-weight: 500;
			color: #333;
			line-height: 12px;
			vertical-align: middle;
			padding: 10px;

			&:hover {
				cursor: default;
			}

			.th-subtitle {
				font-size: 10px;
				font-weight: 400;
				display: block;
				margin-top: 2px;
			}

			&.is-sortable {
				.sort-by {
					@include transition(transform .2s ease);
					display: none;
					text-align: center;
					cursor: pointer;

					.ty-icon {
						line-height: 6px;
						float: left;
					}
				}

				&.asc,
				&.desc {
					background-color: darken($gray-light, 7%);

					.sort-by {
						display: inline-block;
					}
				}

				&:hover {
					background-color: darken($gray-light, 7%);
					cursor: pointer;
				}

				&:active {
					background-color: darken($gray-light, 10%);
					cursor: pointer;
				}
			}
		}

		td {
			@include transition(background-color .05s ease-in-out);
			background-color: white;
			border-top: 1px dashed $gray-dark;
			padding: 7px 10px;
			color: #333;

			.bar-chart {
				display: inline-block;
				min-width: 80px;
				height: 12px;
				margin: 0 3px -2px 0;
			}

			.trend {
				vertical-align: middle;
				color: #666;
				width: 20px;
				min-height: 1px;
				display: inline-block;
			}
		}

		td.is-disabled,
		&.is-disabled td {
			color: #bbb;
			cursor: default;
		}

		/* --------------- Nested table --------------- */

		@at-root {
			.table tr {

				// apply background image to first column

				&[class*="lvl-"] td:first-child {
					background-image: url(../../img/sprite-table.png);
					background-repeat: no-repeat;
				}
				// no background image for level 0

				&.lvl-0 td:first-child {
					background-image: none;
				}

				// any row on level 1

				&.lvl-1 td:first-child {
					padding-left: 25px;
					background-position: 15px 0;
				}

				// last row on level 1

				&.lvl-1.is-last td:first-child {
					background-position: 15px -100px;
				}

				// any row on level 2

				&.lvl-2 td:first-child {
					padding-left: 50px;
					background-position: 30px 0;
				}

				// last row on level 2

				&.lvl-2.is-last td:first-child {
					background-position: 30px -100px;
				}

				// any row on level 2, if there is level 1 after

				&.lvl-2.lvl-2-1 td:first-child {
					padding-left: 50px;
					background-position: 15px -200px;
				}

				// last row on level 2, if there is level 1 after

				&.lvl-2.lvl-2-1.is-last td:first-child {
					background-position: 15px -300px;
				}
			}

			.table.table-selectable tr {

				// apply background image to second column

				&[class*="lvl-"] td:first-child + td {
					background-image: url(../../img/sprite-table.png);
					background-repeat: no-repeat;
				}

				// no background image for checkbox column and for level-0

				&.lvl-0 td:first-child,
				&.lvl-0 td:first-child + td,
				&[class*="lvl-"] td:first-child {
					background-image: none;
				}

				// original padding for checkbox column

				&.lvl-1 td:first-child,
				&.lvl-2 td:first-child {
					padding-left: 10px;
				}

				// any row on level 1

				&.lvl-1 td:first-child + td {
					padding-left: 25px;
					background-position: 15px 0;
				}

				// last row on level 1

				&.lvl-1.is-last td:first-child + td {
					background-position: 15px -100px;
				}

				// any row on level 2

				&.lvl-2 td:first-child + td {
					padding-left: 50px;
					background-position: 30px 0;
				}

				// last row on level 2

				&.lvl-2.is-last td:first-child + td {
					background-position: 30px -100px;
				}

				// any row on level 2, if there is level 1 after

				&.lvl-2.lvl-2-1 td:first-child + td {
					padding-left: 50px;
					background-position: 15px -200px;
				}

				// last row on level 2, if there is level 1 after

				&.lvl-2.lvl-2-1.is-last td:first-child + td {
					background-position: 15px -300px;
				}
			}
		}

		.toggle-expand {
			float: left;
			margin-left: -4px;
			padding: 0px;

			.ty-icon {
				@include transition(all .1s ease-in-out);
				color: #999;
				padding: 2px 3px;
				text-align: center;
				display: block;

				&:hover {
					color: #666;
				}

				&:active {
					color: $dark;
				}
			}
		}
	}

	tbody {
		tr:first-child {
			td {
				border: none;
			}
		}
	}

	tfoot {
		td,
		td:hover {
			@include transition(background-color .1s ease-in-out);
			background-color: darken($gray-light, 4%);
			border-top: 1px solid $gray-dark;
			font-weight: 500;
		}
	}

	/* -------------- Striped table --------------- */

	&.table-striped {
		tr:nth-child(even) {
			td {
				background-color: $gray-light;
			}
		}
	}

	/* -------------- Bordered table -------------- */

	&.table-bordered {
		@include border-radius (3px);
		border: 1px solid $gray-dark;
	}

	&, &.table-striped {
		tr:hover {
			td {
				background-color: lighten($blue, 43%);
			}
		}

		tr.is-selected {
			td {
				background-color: lighten($blue, 40%);
			}
		}
	}

	/* ------------- Selectable table ------------- */

	&.table-selectable {
		th:first-child,
		td:first-child {
			width: 25px;
			min-width: 25px;
			padding-right: 0;

			input[type="checkbox"] {
				@include box-shadow(none);
				@include border-radius(0);
				float: left;
				margin-top: 1px;
				background: none;
				padding: 0;
				min-height: initial;
			}
		}
	}
}

html {
  background: #fff;
  text-align: center;
}

/*
* ---------------------------------------------
* 			  Content positioning
* ---------------------------------------------
*/

.l-left {
	float: left;
}

.l-right {
	float: right;
}

/*
* ---------------------------------------------
* 				Content aligning
* ---------------------------------------------
*/

.l-align-left {
	text-align: left;
}

.l-align-center {
	text-align: center;
}

.l-align-right {
	text-align: right;
}

/*
* ---------------------------------------------
* 				    Visibility
* ---------------------------------------------
*/

.is-hidden {
    display: none !important;
}

.is-visible {
    display: initial !important;
}

SassMeister-output.css

.table-wrapper {
  width: 600px;
}

.table {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-family: Arial, Helvetica, sans-serif;
  border: none;
  border-bottom: 1px solid #e5e5e5;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  /* -------------- Striped table --------------- */
  /* -------------- Bordered table -------------- */
  /* ------------- Selectable table ------------- */
}
.table tr {
  position: relative;
  white-space: nowrap;
  /* --------------- Nested table --------------- */
}
.table tr th, .table tr td {
  width: auto;
  margin: 0;
  text-align: center;
  height: 100%;
  font-size: 13px;
  line-height: normal;
  vertical-align: top;
}
.table tr th.l-align-left, .table tr td.l-align-left {
  text-align: left;
}
.table tr th.l-align-right, .table tr td.l-align-right {
  text-align: right;
}
.table tr th.l-multiline, .table tr td.l-multiline {
  white-space: normal;
}
.table tr td.item-options,
.table tr th.item-options {
  float: none;
  min-height: none;
}
.table tr td.item-options a,
.table tr th.item-options a {
  -moz-transition: color 0.1s ease-in-out;
  -o-transition: color 0.1s ease-in-out;
  -webkit-transition: color 0.1s ease-in-out;
  transition: color 0.1s ease-in-out;
  color: #aaa;
  cursor: pointer;
  display: inline-block;
  margin-left: 2px;
  text-decoration: none;
}
.table tr td.item-options a:first-child,
.table tr th.item-options a:first-child {
  margin-left: 0;
}
.table tr td.item-options a:hover,
.table tr th.item-options a:hover {
  color: #666;
}
.table tr td.item-options a:active,
.table tr th.item-options a:active {
  color: #333;
}
.table tr td.item-title,
.table tr th.item-title {
  float: none;
  min-height: initial;
  min-width: 300px;
  text-align: left;
}
.table tr th {
  -moz-transition: background-color 0.1s ease-in-out;
  -o-transition: background-color 0.1s ease-in-out;
  -webkit-transition: background-color 0.1s ease-in-out;
  transition: background-color 0.1s ease-in-out;
  background-color: #f0f0f0;
  border-bottom: 1px solid #e5e5e5;
  font-weight: 500;
  color: #333;
  line-height: 12px;
  vertical-align: middle;
  padding: 10px;
}
.table tr th:hover {
  cursor: default;
}
.table tr th .th-subtitle {
  font-size: 10px;
  font-weight: 400;
  display: block;
  margin-top: 2px;
}
.table tr th.is-sortable .sort-by {
  -moz-transition: -moz-transform 0.2s ease;
  -o-transition: -o-transform 0.2s ease;
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
  display: none;
  text-align: center;
  cursor: pointer;
}
.table tr th.is-sortable .sort-by .ty-icon {
  line-height: 6px;
  float: left;
}
.table tr th.is-sortable.asc, .table tr th.is-sortable.desc {
  background-color: #e8e8e8;
}
.table tr th.is-sortable.asc .sort-by, .table tr th.is-sortable.desc .sort-by {
  display: inline-block;
}
.table tr th.is-sortable:hover {
  background-color: #e8e8e8;
  cursor: pointer;
}
.table tr th.is-sortable:active {
  background-color: #e1e1e1;
  cursor: pointer;
}
.table tr td {
  -moz-transition: background-color 0.05s ease-in-out;
  -o-transition: background-color 0.05s ease-in-out;
  -webkit-transition: background-color 0.05s ease-in-out;
  transition: background-color 0.05s ease-in-out;
  background-color: white;
  border-top: 1px dashed #e5e5e5;
  padding: 7px 10px;
  color: #333;
}
.table tr td .bar-chart {
  display: inline-block;
  min-width: 80px;
  height: 12px;
  margin: 0 3px -2px 0;
}
.table tr td .trend {
  vertical-align: middle;
  color: #666;
  width: 20px;
  min-height: 1px;
  display: inline-block;
}
.table tr td.is-disabled, .table tr.is-disabled td {
  color: #bbb;
  cursor: default;
}
.table tr[class*="lvl-"] td:first-child {
  background-image: url(../../img/sprite-table.png);
  background-repeat: no-repeat;
}
.table tr.lvl-0 td:first-child {
  background-image: none;
}
.table tr.lvl-1 td:first-child {
  padding-left: 25px;
  background-position: 15px 0;
}
.table tr.lvl-1.is-last td:first-child {
  background-position: 15px -100px;
}
.table tr.lvl-2 td:first-child {
  padding-left: 50px;
  background-position: 30px 0;
}
.table tr.lvl-2.is-last td:first-child {
  background-position: 30px -100px;
}
.table tr.lvl-2.lvl-2-1 td:first-child {
  padding-left: 50px;
  background-position: 15px -200px;
}
.table tr.lvl-2.lvl-2-1.is-last td:first-child {
  background-position: 15px -300px;
}

.table.table-selectable tr[class*="lvl-"] td:first-child + td {
  background-image: url(../../img/sprite-table.png);
  background-repeat: no-repeat;
}
.table.table-selectable tr.lvl-0 td:first-child, .table.table-selectable tr.lvl-0 td:first-child + td, .table.table-selectable tr[class*="lvl-"] td:first-child {
  background-image: none;
}
.table.table-selectable tr.lvl-1 td:first-child, .table.table-selectable tr.lvl-2 td:first-child {
  padding-left: 10px;
}
.table.table-selectable tr.lvl-1 td:first-child + td {
  padding-left: 25px;
  background-position: 15px 0;
}
.table.table-selectable tr.lvl-1.is-last td:first-child + td {
  background-position: 15px -100px;
}
.table.table-selectable tr.lvl-2 td:first-child + td {
  padding-left: 50px;
  background-position: 30px 0;
}
.table.table-selectable tr.lvl-2.is-last td:first-child + td {
  background-position: 30px -100px;
}
.table.table-selectable tr.lvl-2.lvl-2-1 td:first-child + td {
  padding-left: 50px;
  background-position: 15px -200px;
}
.table.table-selectable tr.lvl-2.lvl-2-1.is-last td:first-child + td {
  background-position: 15px -300px;
}
.table tr .toggle-expand {
  float: left;
  margin-left: -4px;
  padding: 0px;
}
.table tr .toggle-expand .ty-icon {
  -moz-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
  color: #999;
  padding: 2px 3px;
  text-align: center;
  display: block;
}
.table tr .toggle-expand .ty-icon:hover {
  color: #666;
}
.table tr .toggle-expand .ty-icon:active {
  color: #333;
}
.table tbody tr:first-child td {
  border: none;
}
.table tfoot td,
.table tfoot td:hover {
  -moz-transition: background-color 0.1s ease-in-out;
  -o-transition: background-color 0.1s ease-in-out;
  -webkit-transition: background-color 0.1s ease-in-out;
  transition: background-color 0.1s ease-in-out;
  background-color: #f0f0f0;
  border-top: 1px solid #e5e5e5;
  font-weight: 500;
}
.table.table-striped tr:nth-child(even) td {
  background-color: #fafafa;
}
.table.table-bordered {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #e5e5e5;
}
.table tr:hover td, .table.table-striped tr:hover td {
  background-color: #eef7fc;
}
.table tr.is-selected td, .table.table-striped tr.is-selected td {
  background-color: #e1f0fa;
}
.table.table-selectable th:first-child,
.table.table-selectable td:first-child {
  width: 25px;
  min-width: 25px;
  padding-right: 0;
}
.table.table-selectable th:first-child input[type="checkbox"],
.table.table-selectable td:first-child input[type="checkbox"] {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  float: left;
  margin-top: 1px;
  background: none;
  padding: 0;
  min-height: initial;
}

html {
  background: #fff;
  text-align: center;
}

/*
* ---------------------------------------------
* 			  Content positioning
* ---------------------------------------------
*/
.l-left {
  float: left;
}

.l-right {
  float: right;
}

/*
* ---------------------------------------------
* 				Content aligning
* ---------------------------------------------
*/
.l-align-left {
  text-align: left;
}

.l-align-center {
  text-align: center;
}

.l-align-right {
  text-align: right;
}

/*
* ---------------------------------------------
* 				    Visibility
* ---------------------------------------------
*/
.is-hidden {
  display: none !important;
}

.is-visible {
  display: initial !important;
}

SassMeister-rendered.html

<div class="trustyou-ui table-wrapper">
		<table class="trustyou-ui table table-striped">
			<thead>
				<tr>
					<th class="item-title is-sortable">Group name <a class="sort-by"><i class="ty-icon ty-icon-caret-up"></i></a></th>
					<th class="is-sortable">Performance <a class="sort-by"><i class="ty-icon ty-icon-caret-up"></i></a></th>
					<th class="is-sortable">Performance <span class="th-subtitle">Comp Index</span> <a class="sort-by"><i class="ty-icon ty-icon-caret-up"></i></a></th>
					<th class="is-sortable">New reviews <a class="sort-by"><i class="ty-icon ty-icon-caret-up"></i></a></th>
					<th class="is-sortable">Response rate <a class="sort-by"><i class="ty-icon ty-icon-caret-up"></i></a></th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td class="item-title">Welt - Ibis (1,012)</td>
					<td>84</td>
					<td>1.25</td>
					<td>270</td>
					<td>24%</td>
				</tr>
				<tr>
					<td class="item-title">Welt - Marriott (522)</td>
					<td>84</td>
					<td>1.25</td>
					<td>270</td>
					<td>24%</td>
				</tr>
				<tr>
					<td class="item-title">World - Crowne Plaza (375)</td>
					<td>84</td>
					<td>1.25</td>
					<td>270</td>
					<td>24%</td>
				</tr>
				<tr>
					<td class="item-title">Worldwide - Pullman (91)</td>
					<td>84</td>
					<td>1.25</td>
					<td>270</td>
					<td>24%</td>
				</tr>
				<tr>
					<td class="item-title">Central Europe - Mercure (123)</td>
					<td>84</td>
					<td>1.25</td>
					<td>270</td>
					<td>24%</td>
				</tr>
			</tbody>
		</table>
	</div>