SASS цветовые примеси

SASS цветовые примеси

// Добавляем в _vars.sass
// color-stack
$color-stack: (group: orange, id: normal, color: #e67835), (group: orange, id: pale, color: #f8a878), (group: orange, id: dark, color: #ad490c), (group: blue, id: normal, color: #426682)

// Добавляем в _mixins.sass функцию вызова цветовых переменных
// color function
@function color($group, $shade: normal, $transparency: 1)
  @each $color in $color-stack
    $c-group: map-get($color, group)
    $c-shade: map-get($color, id)

    @if $group == map-get($color, group) and $shade == map-get($color, id)
      @return rgba(map-get($color, color), $transparency)

// Примеры использования
body{
	color: color(blue, normal,.8);
}
p{
	color: color(orange);
}
blockquote{
	color: color(blue);
	background: color(orange, pale,.4);
	border-color: color(orange, dark);
}