Generated by SassMeister.com.

SassMeister-input-HTML.html

<h4>Preview:</h4>
<div class="st-callout hastitle lightred">
    <div class="inside">
    <h4 class="st-callout-title">Callout Title</h4>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <a href="#">Link</a>
    </div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----


// Set the base color and desired classname below
// Tweak: http://hslpicker.com/#D92626

$color: #D92626;
$classname: lightred;

// Proceed below with caution or copy
// the generated CSS from the CSS panel to the right

/* BEGIN COPY */

.st-callout.#{$classname} {
	color: #fff; // text color
	background:url(./images/underlay.png) repeat-x 0 0 $color;
	border-color: darken($color,10%);
	text-shadow: 0 -1px 0 darken($color,10%);
}

.st-callout.#{$classname} h4.st-callout-title {
	color: #fff; // title color
	background-color: $color;
	text-shadow: 0 1px 1px darken($color,10%);
}

.st-callout.#{$classname} a {
	color: #fff; // link color
}

/* END COPY */

// Everything below is just for sass preview 
* {
    font-family: Sans-Serif;
}
.st-callout {
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	border-radius:6px;
	background: url(http://themes.simplethemes.com/synapse/wp-content/themes/synapse/images/underlay.png) repeat-x 0 0 #efefef;
	border: 1px solid #d5d5d5;
	-webkit-box-shadow: 0px 0px 4px #ccc;
	-moz-box-shadow: 0px 0px 4px #ccc;
	box-shadow: 0px 0px 4px #ccc;
	-pie-box-shadow: 0px 0px 4px #ccc;
	position: relative;
	behavior: url('./wp-content/themes/synapse/PIE.php');
	margin-bottom: 20px;
}

.st-callout .button.center a.button {
	float: none !important;
}

.st-callout.right {
	float: right;
	right: 0;
	display: inline-block;
}

.st-callout.left {
	float: left;
	left: 0;
	display: inline-block;
}

.st-callout.center {
	float: none;
	clear: both;
	text-align: left;
}

.st-callout .inside {
	padding: 20px;
}
.st-callout.hastitle .inside {
	padding: 0px 20px 20px 20px;
}


.st-callout h4.st-callout-title {
	-webkit-border-radius:6px 6px 0px 0px;
	-moz-border-radius:6px 6px 0px 0px;
	border-radius:6px 6px 0px 0px;
	margin: 0px 0px 10px -20px;
	padding: 12px 0px 15px 40px;
	text-indent: -20px;
	width: 100%;
	font-size: 1.5em;
	line-height: 1;
	background: url(http://themes.simplethemes.com/synapse/wp-content/themes/synapse/images/boxtitle.png) repeat-x 0 0px #efefef;
	color: #434343;
	position: relative;
	behavior: url('./wp-content/themes/synapse/PIE.php');
	text-shadow: 0 1px 1px #edeeed;
}

.st-callout h4.st-callout-title.center {
	text-align: center;
	text-indent: -40px !important;
}

.st-callout a {
	text-shadow: none !important;
	text-decoration: underline;
	color: inherit;
}
.st-callout a:hover {
	text-decoration: none;
}

SassMeister-output.css

/* BEGIN COPY */
.st-callout.lightred {
  color: #fff;
  background: url(./images/underlay.png) repeat-x 0 0 #d92626;
  border-color: #ae1e1e;
  text-shadow: 0 -1px 0 #ae1e1e;
}

.st-callout.lightred h4.st-callout-title {
  color: #fff;
  background-color: #d92626;
  text-shadow: 0 1px 1px #ae1e1e;
}

.st-callout.lightred a {
  color: #fff;
}

/* END COPY */
* {
  font-family: Sans-Serif;
}

.st-callout {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  background: url(http://themes.simplethemes.com/synapse/wp-content/themes/synapse/images/underlay.png) repeat-x 0 0 #efefef;
  border: 1px solid #d5d5d5;
  -webkit-box-shadow: 0px 0px 4px #ccc;
  -moz-box-shadow: 0px 0px 4px #ccc;
  box-shadow: 0px 0px 4px #ccc;
  -pie-box-shadow: 0px 0px 4px #ccc;
  position: relative;
  behavior: url("./wp-content/themes/synapse/PIE.php");
  margin-bottom: 20px;
}

.st-callout .button.center a.button {
  float: none !important;
}

.st-callout.right {
  float: right;
  right: 0;
  display: inline-block;
}

.st-callout.left {
  float: left;
  left: 0;
  display: inline-block;
}

.st-callout.center {
  float: none;
  clear: both;
  text-align: left;
}

.st-callout .inside {
  padding: 20px;
}

.st-callout.hastitle .inside {
  padding: 0px 20px 20px 20px;
}

.st-callout h4.st-callout-title {
  -webkit-border-radius: 6px 6px 0px 0px;
  -moz-border-radius: 6px 6px 0px 0px;
  border-radius: 6px 6px 0px 0px;
  margin: 0px 0px 10px -20px;
  padding: 12px 0px 15px 40px;
  text-indent: -20px;
  width: 100%;
  font-size: 1.5em;
  line-height: 1;
  background: url(http://themes.simplethemes.com/synapse/wp-content/themes/synapse/images/boxtitle.png) repeat-x 0 0px #efefef;
  color: #434343;
  position: relative;
  behavior: url("./wp-content/themes/synapse/PIE.php");
  text-shadow: 0 1px 1px #edeeed;
}

.st-callout h4.st-callout-title.center {
  text-align: center;
  text-indent: -40px !important;
}

.st-callout a {
  text-shadow: none !important;
  text-decoration: underline;
  color: inherit;
}

.st-callout a:hover {
  text-decoration: none;
}

SassMeister-rendered.html

<h4>Preview:</h4>
<div class="st-callout hastitle lightred">
    <div class="inside">
    <h4 class="st-callout-title">Callout Title</h4>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <a href="#">Link</a>
    </div>
</div>