rochapablo/_constants.scss

## _constants.scss
// http://css3.bradshawenterprises.com/blog/why-sass/
// _constants.scss

$brand-color: rgb(255,0,0);
$accent-color: darken($brand-color, 10); // That is, 10% darker than the brand-color.
$body-font: "Helvetica Neue", Arial, sans-serif;
$header-font: "Segoe UI", "Myriad Pro", $body-font;
$width: 960px;

## index.html
<!DOCTYPE html />
<html lang="pt-br">
<head>
  <meta charset="utf-8" />
    <title>SASS</title>
    <link href="https://gist.github.com/rochapablo/6449655/raw/e91ecdd817a5213c2e7cce9c18a8f0faa1c0a750/style.scss" rel="stylesheet" />
  </head>
  <body>
    <h1>Teste</h1>
  </body>
</html>

## style.css
_

## style.scss
// http://css3.bradshawenterprises.com/blog/why-sass/
// style.scss (// don't appear in the outputed CSS, whereas /* */ do.)

@import 'constants';

body {
    font-family: $body-font;
    width: $width - 2 * 10px;
    padding:10px;
}

h1,h2,h3,h4 {
    font-family: $header-font;
}

h1 {
    color:$brand-color;
}

section {
    h1 {
        color:$accent-color;
    }
}

  @mixin gradient($from, $to, $height, $pie:"false") {
    background-color: $to;

    background-image: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
    background-image: -webkit-linear-gradient($from, $to);
    background-image: -moz-linear-gradient($from, $to);
    background-image: -o-linear-gradient($from, $to);
    background-image: -ms-linear-gradient($from, $to);
    background-image: linear-gradient($from, $to);

    @if $pie == "true" {
        // For CSS3PIE
        -pie-background: linear-gradient(90deg, $from,$to);
    }

    background-repeat: repeat-x;

    -webkit-background-size: 100% $height;
    -moz-background-size: 100% $height;
    -o-background-size: 100% $height;
    background-size: 100% $height;
}

.gradient {
    @include gradient(hsl(0, 80%, 50%), hsl(120, 80%, 50%), 30px);
}

.div1 {
    @extend .gradient;
    color:white;
}

.div2 {
    @extend .gradient;
    color: blue;
}
	// http://css3.bradshawenterprises.com/blog/why-sass/
	// _constants.scss

	$brand-color: rgb(255,0,0);
	$accent-color: darken($brand-color, 10); // That is, 10% darker than the brand-color.
	$body-font: "Helvetica Neue", Arial, sans-serif;
	$header-font: "Segoe UI", "Myriad Pro", $body-font;
	$width: 960px;
	<!DOCTYPE html />
	<html lang="pt-br">
	<head>
	<meta charset="utf-8" />
	<title>SASS</title>
	<link href="https://gist.github.com/rochapablo/6449655/raw/e91ecdd817a5213c2e7cce9c18a8f0faa1c0a750/style.scss" rel="stylesheet" />
	</head>
	<body>
	<h1>Teste</h1>
	</body>
	</html>
	// http://css3.bradshawenterprises.com/blog/why-sass/
	// style.scss (// don't appear in the outputed CSS, whereas /* */ do.)

	@import 'constants';

	body {
	font-family: $body-font;
	width: $width - 2 * 10px;
	padding:10px;
	}

	h1,h2,h3,h4 {
	font-family: $header-font;
	}

	h1 {
	color:$brand-color;
	}

	section {
	h1 {
	color:$accent-color;
	}
	}

	@mixin gradient($from, $to, $height, $pie:"false") {
	background-color: $to;

	background-image: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
	background-image: -webkit-linear-gradient($from, $to);
	background-image: -moz-linear-gradient($from, $to);
	background-image: -o-linear-gradient($from, $to);
	background-image: -ms-linear-gradient($from, $to);
	background-image: linear-gradient($from, $to);

	@if $pie == "true" {
	// For CSS3PIE
	-pie-background: linear-gradient(90deg, $from,$to);
	}

	background-repeat: repeat-x;

	-webkit-background-size: 100% $height;
	-moz-background-size: 100% $height;
	-o-background-size: 100% $height;
	background-size: 100% $height;
	}

	.gradient {
	@include gradient(hsl(0, 80%, 50%), hsl(120, 80%, 50%), 30px);
	}

	.div1 {
	@extend .gradient;
	color:white;
	}

	.div2 {
	@extend .gradient;
	color: blue;
	}