Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="">

    <a href="" class="">Save changes</a>

</div>

SassMeister-input.scss

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

@import "compass/css3";

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

/*
* ---------------------------------------------
* 				        Buttons
* ---------------------------------------------
*/

.btn {
  @include transition(all .08s ease-in);
	@include border-radius(4px);
  font-family: Arial, Helvetica, sans-serif;
	display: inline-block;
	padding: 6px 20px;
	border: 1px solid #e5e5e5;
	text-align: center;
	text-decoration: none;
	font-size: 13px;
	cursor: pointer;
	background: $gray-light;
	color: #666;
  
  &:hover {
		background: darken($gray-light, 2%);
	}

	&:active {
		background: darken($gray-light, 4%);
	}
  
  &.btn-sm {
		padding: 6px 15px;
		font-size: 11px;
		font-weight: 500;
		line-height: normal;
	}

	&.btn-lg {
		padding: 10px 25px;
		font-size: 15px;
	}
	
	&.btn-primary {
		border-color:$blue;
		background: $blue;

		&, .ty-icon {
			color: white;
		}

		&:hover {
			border-color: saturate($blue, 50%);
			background: saturate($blue, 50%);
		}

		&:active {
			border-color: darken($blue, 7%);
			background: darken($blue, 7%);
		}

		&[disabled],
		&.is-disabled {
			border-color: lighten($blue, 20%);
			background: lighten($blue, 20%);
			color: lighten($blue, 40%);
		}
	}

	/* --------------- Success button ---------------- */

	&.btn-positive {
		border-color: $green;
		background: $green;

		&, .ty-icon {
			color: white;
		}

		&:hover {
			border-color: saturate($green, 10%);
			background: saturate($green, 10%);
		}

		&:active {
			border-color: darken($green, 7%);
			background: darken($green, 7%);
		}

		&[disabled],
		&.is-disabled {
			border-color: lighten($green, 20%);
			background: lighten($green, 20%);
			color: lighten($green, 40%);
		}
	}

	/* --------------- Warning button ---------------- */

	&.btn-neutral {
		border-color: $orange;
		background: $orange;

		&, .ty-icon {
			color: white;
		}

		&:hover {
			border-color: lighten($orange, 5%);
			background: lighten($orange, 5%);
		}

		&:active {
			border-color: darken($orange, 5%);
			background: darken($orange, 5%);
		}

		&[disabled],
		&.is-disabled {
			border-color: lighten($orange, 20%);
			background: lighten($orange, 20%);
			color: lighten($orange, 40%);
		}
	}

	/* --------------- Error button ---------------- */

	&.btn-negative {
		border-color: $red;
		background: $red;

		&, .ty-icon {
			color: white;
		}

		&:hover {
			border-color: saturate($red, 60%);
			background: saturate($red, 60%);
		}

		&:active {
			border-color: darken($red, 7%);
			background: darken($red, 7%);
		}

		&[disabled],
		&.is-disabled {
			border-color: lighten($red, 20%);
			background: lighten($red, 20%);
			color: lighten($red, 40%);
		}
	}
}

html {
  background: #fff;
}



/*
* ---------------------------------------------
* 			  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

/*
* ---------------------------------------------
* 				        Buttons
* ---------------------------------------------
*/
.btn {
  -moz-transition: all 0.08s ease-in;
  -o-transition: all 0.08s ease-in;
  -webkit-transition: all 0.08s ease-in;
  transition: all 0.08s ease-in;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  font-family: Arial, Helvetica, sans-serif;
  display: inline-block;
  padding: 6px 20px;
  border: 1px solid #e5e5e5;
  text-align: center;
  text-decoration: none;
  font-size: 13px;
  cursor: pointer;
  background: #fafafa;
  color: #666;
  /* --------------- Success button ---------------- */
  /* --------------- Warning button ---------------- */
  /* --------------- Error button ---------------- */
}
.btn:hover {
  background: whitesmoke;
}
.btn:active {
  background: #f0f0f0;
}
.btn.btn-sm {
  padding: 6px 15px;
  font-size: 11px;
  font-weight: 500;
  line-height: normal;
}
.btn.btn-lg {
  padding: 10px 25px;
  font-size: 15px;
}
.btn.btn-primary {
  border-color: #3498db;
  background: #3498db;
}
.btn.btn-primary, .btn.btn-primary .ty-icon {
  color: white;
}
.btn.btn-primary:hover {
  border-color: #109fff;
  background: #109fff;
}
.btn.btn-primary:active {
  border-color: #2386c8;
  background: #2386c8;
}
.btn.btn-primary[disabled], .btn.btn-primary.is-disabled {
  border-color: #8bc4ea;
  background: #8bc4ea;
  color: #e1f0fa;
}
.btn.btn-positive {
  border-color: #7cb342;
  background: #7cb342;
}
.btn.btn-positive, .btn.btn-positive .ty-icon {
  color: white;
}
.btn.btn-positive:hover {
  border-color: #7cbf36;
  background: #7cbf36;
}
.btn.btn-positive:active {
  border-color: #6a9938;
  background: #6a9938;
}
.btn.btn-positive[disabled], .btn.btn-positive.is-disabled {
  border-color: #aed388;
  background: #aed388;
  color: #e1efd2;
}
.btn.btn-neutral {
  border-color: #ffa726;
  background: #ffa726;
}
.btn.btn-neutral, .btn.btn-neutral .ty-icon {
  color: white;
}
.btn.btn-neutral:hover {
  border-color: #ffb140;
  background: #ffb140;
}
.btn.btn-neutral:active {
  border-color: #ff9d0c;
  background: #ff9d0c;
}
.btn.btn-neutral[disabled], .btn.btn-neutral.is-disabled {
  border-color: #ffd08c;
  background: #ffd08c;
  color: #fffaf2;
}
.btn.btn-negative {
  border-color: #f06748;
  background: #f06748;
}
.btn.btn-negative, .btn.btn-negative .ty-icon {
  color: white;
}
.btn.btn-negative:hover {
  border-color: #ff5e39;
  background: #ff5e39;
}
.btn.btn-negative:active {
  border-color: #ed4c27;
  background: #ed4c27;
}
.btn.btn-negative[disabled], .btn.btn-negative.is-disabled {
  border-color: #f8b5a6;
  background: #f8b5a6;
  color: white;
}

html {
  background: #fff;
}

/*
* ---------------------------------------------
* 			  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="">

    <a href="" class="">Save changes</a>

</div>