Skip to content

Instantly share code, notes, and snippets.

@parhumm
Last active August 29, 2015 14:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save parhumm/d1093d2257c82cff26d1 to your computer and use it in GitHub Desktop.
Save parhumm/d1093d2257c82cff26d1 to your computer and use it in GitHub Desktop.
//
// Article Info(Fun Part):
//
@mixin person($who) {
#{$who}-name: "Parhum Khoshbakht";
#{$who}-url: "http://parhum.net";
#{$who}-twitter: "@parhumm";
}
%article__info {
article-title: "Get Color Data";
@include person(author);
}
//
// Color Data Mixins & Functions
//
@mixin color-data($color) {
hue: hue($color);
saturation: saturation($color);
lightness: lightness($color);
}
@function use_hue_of_color($first_color, $second_color) {
@return hsl(hue($second_color), saturation($first_color), lightness($first_color));
}
//
// Color Variables
//
$primary-color: #008CBA;
$secondary-color: #e7e7e7;
$alert-color: #FA8072;
$success-color: #84BE6A;
$warning-color: #f08a24;
$info-color: #a0d3e8;
//
// Usage
//
.primary-color {
@include color-data($primary-color);
$new_primary: use_hue_of_color($primary-color, $success-color);
color: $new_primary;
@include color-data($new_primary);
}
.secondary-color {
@include color-data($secondary-color);
}
.alert-color {
@include color-data($alert-color);
}
.success-color {
@include color-data($success-color);
}
.warning-color {
@include color-data($warning-color);
}
.info-color {
@include color-data($info-color);
}
.primary-color {
hue: 194.83871deg;
saturation: 100%;
lightness: 36.47059%;
color: #3aba00;
hue: 101.42857deg;
saturation: 100%;
lightness: 36.47059%;
}
.secondary-color {
hue: 0deg;
saturation: 0%;
lightness: 90.58824%;
}
.alert-color {
hue: 6.17647deg;
saturation: 93.15068%;
lightness: 71.37255%;
}
.success-color {
hue: 101.42857deg;
saturation: 39.25234%;
lightness: 58.03922%;
}
.warning-color {
hue: 30.0deg;
saturation: 87.17949%;
lightness: 54.11765%;
}
.info-color {
hue: 197.5deg;
saturation: 61.01695%;
lightness: 76.86275%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment