RyoSugimoto
2/26/2013 - 5:08 AM

Sassのカラースキーム設定用ファイルの記述例。

Sassのカラースキーム設定用ファイルの記述例。

/*
 * Color Schemes Mixins
 * Include this mixin on a selector,
 * the colors are applied for its children.
 * @mixin color-scheme-<name>
 */

// Default
@mixin color-scheme-default {

	// if needed, difine variables
	
	//
	$text-color: #000;
	$base-color: #FFF;

	// anchors
	$anchor-color: #06C;
	$link-color: #06C;
	$visited-color: #969;
	$hover-color: #06C;
	$active-color: #C60;

	//
	$first-color: #DDD;
	$second-color: #06C;
	$third-color: #000;
	$accent-color: #C00;
	$marking-color: #FD6;
	$soft-color: #AAA;
	$inverse-bg-color: #000;
	$inverse-text-color: #FFF;

	//
	$border-color: #DDD;
	$head-bg-color: transparent;
	$head-border-color: #000;
	$head-text-color: #000;

	// base colors
	background-color: $base-color;
	color: $text-color;

	// set scheme
	&::selection,
	::-moz-selection {
		background-color: $inverse-bg-color;
		color: $inverse-text-color;
	}
	a {
		color: $link-color;
		&:link {
			color: $link-color;
		}
		&:visited {
			color: $visited-color;
		}
		&:hover {
			color: $link-color;
		}
		&:active {
			color: $active-color;
		}
	}
	.accent-text {
		color: $accent-color;
	}
	.accent-bg {
		background-color: $accent-color;
	}
	.accent-border {
		border-color: $accent-color;
	}
	.soft {
		color: $soft-color;
	}
	.heading {
		background-color: $head-bg-color;
		border-color: $head-border-color;
		color: $head-text-color;
	}
	.frame {
		border-color: $border-color;
	}
	.box {
		background-color: #F6F6F6; 
		border-color: $border-color;
		.header {
			background-color: $inverse-bg-color;
			color: $inverse-text-color;
		}
		.action {
			background-color: #EEE; 
			border-color: $border-color;
		}
	}
}
// for by extend or by add class
.color-scheme-default {
	@include color-scheme-default;
}