stevenh512/border.html

## _gradient-border.scss
@import "compass/css3";

@mixin gradient-border($border: 0 0 0 2px,
                       $background: #fff,
                       $gradient-orientation: top left,
                       $gradient-start-color: rgba(0, 0, 0, .09),
                       $gradient-stop-color:  rgba(0, 0, 0, 0)) {
  @include inline-block;
  @include background-image(linear-gradient($gradient-orientation,
                                            $gradient-start-color,
                                            $gradient-stop-color));
  > div {
    background: $background;
    margin: $border;
  }
}

## border.html
<html>
  <head>
    <title>Gradient borders</title>
    <link rel="stylesheet" href="stylesheets/screen.css" type="text/css" />
  </head>
  <body>
    <div class="border-container">
      <div>
        <h1>Ohai!</h1>
      </div>
    </div>
  </body>
</html>

## config.rb
# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed

# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false


# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

## screen.scss
@import "gradient-border";

.border-container {
  margin-left: 50px;
  margin-top: 50px;
  @include gradient-border(2px, #fff, top right);
  > div {
    padding: 50px;
    text-align: center;
  }
}

h1 {
  text-align: center;
}
	@import "compass/css3";

	@mixin gradient-border($border: 0 0 0 2px,
	$background: #fff,
	$gradient-orientation: top left,
	$gradient-start-color: rgba(0, 0, 0, .09),
	$gradient-stop-color: rgba(0, 0, 0, 0)) {
	@include inline-block;
	@include background-image(linear-gradient($gradient-orientation,
	$gradient-start-color,
	$gradient-stop-color));
	> div {
	background: $background;
	margin: $border;
	}
	}
	<html>
	<head>
	<title>Gradient borders</title>
	<link rel="stylesheet" href="stylesheets/screen.css" type="text/css" />
	</head>
	<body>
	<div class="border-container">
	<div>
	<h1>Ohai!</h1>
	</div>
	</div>
	</body>
	</html>
	# Require any additional compass plugins here.

	# Set this to the root of your project when deployed:
	http_path = "/"
	css_dir = "stylesheets"
	sass_dir = "sass"
	images_dir = "images"
	javascripts_dir = "javascripts"

	# You can select your preferred output style here (can be overridden via the command line):
	# output_style = :expanded or :nested or :compact or :compressed

	# To enable relative paths to assets via compass helper functions. Uncomment:
	# relative_assets = true

	# To disable debugging comments that display the original location of your selectors. Uncomment:
	# line_comments = false


	# If you prefer the indented syntax, you might want to regenerate this
	# project again passing --syntax sass, or you can uncomment this:
	# preferred_syntax = :sass
	# and then run:
	# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
	@import "gradient-border";

	.border-container {
	margin-left: 50px;
	margin-top: 50px;
	@include gradient-border(2px, #fff, top right);
	> div {
	padding: 50px;
	text-align: center;
	}
	}

	h1 {
	text-align: center;
	}