SASS Variable Image-Gradient

README.md

SASS Variable Image-Gradient

Summary

I try to make my themes as customizable by variables as possible. In this gist we setup default variables, then some helper variables and inject pieces of the background mixin based on what has been set in our default variables.

banner.scss

@import "compass/css3/images";

$default-use-box-bg-image: true !default;
$default-use-box-bg-gradient: true !default;
$box-bg-color: #999999;
$box-bg-image: "alt-bg.png"

[role="banner"] {
	$box-bg: "" !default;
	$gradient-bg: "" !default;
	$darker-box-bg-color: darken($box-bg-color, 20);

	@if $default-use-box-bg-image == true {
		$box-bg: unquote("url('images/#{$box-bg-image}')");
	} @else if $default-use-box-bog-image == false {
		$box-bg: "";
	}

	@if $default-use-box-bg-gradient == true {
		$gradient-bg: linear-gradient(top, $darker-box-bg-color, $box-bg-color, $darker-box-bg-color);
		@include filter-gradient($box-bg-color, darken($box-bg-color, 20));
	} @else if $default-use-box-bg-gradient == false {
		$gradient-bg: "";
	}

	@include background($background-1: $box-bg, $background-2: $gradient-bg);

	background-color: $box-bg-color;
}