Generated by SassMeister.com.

SassMeister-input-HTML.html

<ul class="trustyou-ui tabs l-justified">
	<li class="is-ctive">
		<a href="#tab-portfolio" data-toggle="tab">
			<i class="ty-icon ty-icon-suitcase"></i> Portfolio
		</a>
	</li>
	<li>
		<a href="#tab-comparison" data-toggle="tab">
			<i class="ty-icon ty-icon-compare"></i> Comparison
		</a>
	</li>
	<li>
		<a href="#tab-reviews" data-toggle="tab">
			<i class="ty-icon ty-icon-comments"></i> Reviews
		</a>
	</li>
	<li>
		<a href="#tab-dashboard" data-toggle="tab">
			<i class="ty-icon ty-icon-gauge"></i> Dashboard
		</a>
	</li>
	<li>
		<a href="#tab-social" data-toggle="tab">
			<i class="ty-icon ty-icon-users"></i> Social
		</a>
	</li>
	<li>
		<a href="#tab-survey" data-toggle="tab">
			<i class="ty-icon ty-icon-file-edit"></i> Survey
		</a>
	</li>
    <li>
		<a href="#tab-reports" data-toggle="tab">
			<i class="ty-icon ty-icon-chart-bars"></i> Reports
		</a>
	</li>
</ul>

SassMeister-input.scss

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

@import 'compass/css3';

$blue: #3498db;

.tabs {
	border-bottom: none;
	width: 100%;
	list-style: none;
	margin: 0;
	padding: 0;

	> li {
		@include transition(background 50ms ease-in-out);
		float: left;
        width: 14%;
		margin-left: 2px;

		> a {
		    @include border-radius(3px 3px 0 0);
			@include transition(all .05s ease-in-out);
			display: block;
			text-decoration: none;			
			font-size: 14px;
			color: lighten($blue, 35%);
		    background: darken($blue, 7%);
			text-align: center;
			padding: 11px 15px;
			white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-family: Arial, Helvetica, sans-serif;

			&:hover, &:active {
				background: transparent;
				color: white;
			}

			&:active {
				padding: 14px 15px 8px;
			}

			.ty-icon {
				font-size: 18px;
                float: left;
                margin: -3px 10px 0 0;
			}

			.link-content {
				position: relative;
				padding-left: 25px;
			}

            &:hover {
                background: darken($blue, 12%);
            }
    
            &:active {
                background: darken($blue, 9%);
            }
		}

		&:before {
			@include transition(all 200ms cubic-bezier(0.0, 0.0, 0.3, 1.5));
			@include border-radius(3px 3px 0 0);
			content: '';
			position: absolute;
			bottom: 0;
			top: 100%;
			width: 100%;
			background: #eee;
		}

		&.is-active {
			> a {
				background: transparent;
				color: darken($blue, 10%);
			}

			&:before {
				top: 0;
			}
		}
	}
}

SassMeister-output.css

.tabs {
  border-bottom: none;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tabs > li {
  -moz-transition: background 50ms ease-in-out;
  -o-transition: background 50ms ease-in-out;
  -webkit-transition: background 50ms ease-in-out;
  transition: background 50ms ease-in-out;
  float: left;
  width: 14%;
  margin-left: 2px;
}
.tabs > li > a {
  -moz-border-radius: 3px 3px 0 0;
  -webkit-border-radius: 3px;
  border-radius: 3px 3px 0 0;
  -moz-transition: all 0.05s ease-in-out;
  -o-transition: all 0.05s ease-in-out;
  -webkit-transition: all 0.05s ease-in-out;
  transition: all 0.05s ease-in-out;
  display: block;
  text-decoration: none;
  font-size: 14px;
  color: #cce5f6;
  background: #2386c8;
  text-align: center;
  padding: 11px 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: Arial, Helvetica, sans-serif;
}
.tabs > li > a:hover, .tabs > li > a:active {
  background: transparent;
  color: white;
}
.tabs > li > a:active {
  padding: 14px 15px 8px;
}
.tabs > li > a .ty-icon {
  font-size: 18px;
  float: left;
  margin: -3px 10px 0 0;
}
.tabs > li > a .link-content {
  position: relative;
  padding-left: 25px;
}
.tabs > li > a:hover {
  background: #2077b2;
}
.tabs > li > a:active {
  background: #2280bf;
}
.tabs > li:before {
  -moz-transition: all 200ms cubic-bezier(0, 0, 0.3, 1.5);
  -o-transition: all 200ms cubic-bezier(0, 0, 0.3, 1.5);
  -webkit-transition: all 200ms cubic-bezier(0, 0, 0.3, 1.5);
  transition: all 200ms cubic-bezier(0, 0, 0.3, 1.5);
  -moz-border-radius: 3px 3px 0 0;
  -webkit-border-radius: 3px;
  border-radius: 3px 3px 0 0;
  content: '';
  position: absolute;
  bottom: 0;
  top: 100%;
  width: 100%;
  background: #eee;
}
.tabs > li.is-active > a {
  background: transparent;
  color: #217dbb;
}
.tabs > li.is-active:before {
  top: 0;
}

SassMeister-rendered.html

<ul class="trustyou-ui tabs l-justified">
	<li class="is-ctive">
		<a href="#tab-portfolio" data-toggle="tab">
			<i class="ty-icon ty-icon-suitcase"></i> Portfolio
		</a>
	</li>
	<li>
		<a href="#tab-comparison" data-toggle="tab">
			<i class="ty-icon ty-icon-compare"></i> Comparison
		</a>
	</li>
	<li>
		<a href="#tab-reviews" data-toggle="tab">
			<i class="ty-icon ty-icon-comments"></i> Reviews
		</a>
	</li>
	<li>
		<a href="#tab-dashboard" data-toggle="tab">
			<i class="ty-icon ty-icon-gauge"></i> Dashboard
		</a>
	</li>
	<li>
		<a href="#tab-social" data-toggle="tab">
			<i class="ty-icon ty-icon-users"></i> Social
		</a>
	</li>
	<li>
		<a href="#tab-survey" data-toggle="tab">
			<i class="ty-icon ty-icon-file-edit"></i> Survey
		</a>
	</li>
    <li>
		<a href="#tab-reports" data-toggle="tab">
			<i class="ty-icon ty-icon-chart-bars"></i> Reports
		</a>
	</li>
</ul>