Skip to content

Instantly share code, notes, and snippets.

@bradcerasani

bradcerasani/SassMeister-input.scss

Last active November 24, 2015 22:51
Show Gist options
  • Save bradcerasani/6933397f782ee19bcc56 to your computer and use it in GitHub Desktop.
Save bradcerasani/6933397f782ee19bcc56 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input.scss
// ----
// libsass (v3.2.5)
// ----
// =============================================
// # Settings > Colors
// =============================================
// Base
$_colorBaseGray: #76787a !default;
$_colorBaseWhite: #fafafa !default;
// Brand Colors
$_colorBrandGreen: #49b749;
// Variants
$colorVariants: (
gray: (
base: $_colorBaseGray,
light: lighten($_colorBaseGray, 10%),
lighter: lighten($_colorBaseGray, 40%),
dark: darken($_colorBaseGray, 10%)
),
white: (
base: $_colorBaseWhite,
dark: darken($_colorBaseWhite, 10%)
),
green: (
base: $_colorBrandGreen,
light: lighten($_colorBrandGreen, 10%),
lighter: lighten($_colorBrandGreen, 40%),
),
social: (
facebook: #3b5998,
google: #db4437,
twitter: #55acee
),
);
// =============================================
// # Tools > Functions
// =============================================
// Palette fetch
@function palette($color, $tone: 'base') {
@return map-get(map-get($colorVariants, $color), $tone);
}
// =============================================
// # Utilities > Colors
// =============================================
@each $alias, $color in $colorVariants {
// Create base color classes
.u-color-#{$alias} {
color: palette($alias);
}
.u-bg-#{$alias} {
background-color: palette($alias);
}
// Loop through color maps
@each $variant, $value in $color {
// Use simplified classnames for social colors
@if $alias == social {
.u-color-#{$variant} {
color: $value;
}
.u-bg-#{$variant} {
background-color: $value;
}
// No need to recreate base color classes
} @else if $variant != base {
.u-color-#{$alias}--#{$variant} {
color: $value;
}
.u-bg-#{$alias}--#{$variant} {
background-color: $value;
}
}
}
}
Raw
SassMeister-output.css
.u-color-gray {
color: #76787a;
}
.u-bg-gray {
background-color: #76787a;
}
.u-color-gray--light {
color: #909293;
}
.u-bg-gray--light {
background-color: #909293;
}
.u-color-gray--lighter {
color: #dddedf;
}
.u-bg-gray--lighter {
background-color: #dddedf;
}
.u-color-gray--dark {
color: #5d5e60;
}
.u-bg-gray--dark {
background-color: #5d5e60;
}
.u-color-white {
color: #fafafa;
}
.u-bg-white {
background-color: #fafafa;
}
.u-color-white--dark {
color: #e1e1e1;
}
.u-bg-white--dark {
background-color: #e1e1e1;
}
.u-color-green {
color: #49b749;
}
.u-bg-green {
background-color: #49b749;
}
.u-color-green--light {
color: #6ec56e;
}
.u-bg-green--light {
background-color: #6ec56e;
}
.u-color-green--lighter {
color: #dbf1db;
}
.u-bg-green--lighter {
background-color: #dbf1db;
}
.u-color-facebook {
color: #3b5998;
}
.u-bg-facebook {
background-color: #3b5998;
}
.u-color-google {
color: #db4437;
}
.u-bg-google {
background-color: #db4437;
}
.u-color-twitter {
color: #55acee;
}
.u-bg-twitter {
background-color: #55acee;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment