オレオレ Sass の色管理

cusutom-color-name-definition-and-context-or-role-based-semantic-name-for-assign.scss

// Define custom color name.
$my-red: #ee3333;
$my-blue: #3333ee;

// Then assign thme to role or context based name variables.
$header-bg: $my-red;
$header-active-fg: $my-blue;

// Bind them to elements finally.
.header {
  background-color: $header-bg;
}
 
.header .active {
  color: $header-active-fg;
}