Skip to content

Instantly share code, notes, and snippets.

@metamn
Last active August 29, 2015 14:21
Show Gist options
  • Save metamn/b693076f8cf51806de7f to your computer and use it in GitHub Desktop.
Save metamn/b693076f8cf51806de7f to your computer and use it in GitHub Desktop.
Colors SCSS
// The background color
$white: #f1f1f1;
// The text color
$black: #003A40;
// The highlight color
$blue: rgba(0, 0, 255, 1);
// A lighter highlight color
$thumbblue: rgba(38, 38, 255, 1);
// Color combinations. Colors are not used standalone but in pairs
@mixin colors($name) {
@if ($name == 'white-on-blue') {
color: $white;
background-color: $blue;
}
@if ($name == 'white-on-thumbblue') {
color: $white;
background-color: $thumbblue;
}
@if ($name == 'blue-on-white') {
color: $blue;
background-color: $white;
}
}
// Color classes
.white {
background: #f1f1f1;
};
.black {
background: #003A40;
};
.blue {
background: rgba(0, 0, 255, 1);
};
.thumbblue {
background: rgba(38, 38, 255, 1);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment