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;
}