Skip to content

Instantly share code, notes, and snippets.

@codingdesigner
Last active August 29, 2015 14:17
Show Gist options
  • Save codingdesigner/e4bffc055fbefe67eaff to your computer and use it in GitHub Desktop.
Save codingdesigner/e4bffc055fbefe67eaff to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<h1 class="foo">I am foo</h1>
<h1 class="bar">I am bar</h1>
// ----
// libsass (v3.1.0)
// ----
@function color($color, $tone: 'base') {
@return map-get(map-get($palettes, $color), $tone);
}
@mixin try-colors() {
@each $palette, $items in $palettes {
@each $name, $value in $items {
/* color: #{$value}; */
/* background-color: #{$value}; */
}
}
}
// ==========================================================================
// Global Variables - Colors
// ========================================================================== */
$palettes: (
orange: (
base: #ff7900,
light: #FEBD3B,
x-light: #FBD54D
),
red: (
base: #CF003C,
dark: #991933
),
brown: (
base: #945413
),
green: (
base: #6CBE22
),
blue: (
base: #0070D0,
dark: shade(#0070D0, 40%)
),
gray: (
base: mix(#91959a, #282F36),
light: #91959a,
dark: #282F36
),
white: (
base: #FFFFFF,
transparent: hsla(0, 0%, 100%, 0)
),
black: (
base: #000000
)
);
// Semantic Colors
$color--text: color(black);
$color--link: color(black);
$color--border: color(gray, dark);
$color--border-active: color(black);
$bg-color: color(white);
.foo {
color: color(orange);
background: color(gray, dark);
}
.bar {
@include try-colors();
}
.foo {
color: #ff7900;
background: #282F36; }
.bar {
/* color: #ff7900; */
/* background-color: #ff7900; */
/* color: #FEBD3B; */
/* background-color: #FEBD3B; */
/* color: #FBD54D; */
/* background-color: #FBD54D; */
/* color: #CF003C; */
/* background-color: #CF003C; */
/* color: #991933; */
/* background-color: #991933; */
/* color: #945413; */
/* background-color: #945413; */
/* color: #6CBE22; */
/* background-color: #6CBE22; */
/* color: #0070D0; */
/* background-color: #0070D0; */
/* color: shade(#0070D0, 40%); */
/* background-color: shade(#0070D0, 40%); */
/* color: #5c6268; */
/* background-color: #5c6268; */
/* color: #91959a; */
/* background-color: #91959a; */
/* color: #282F36; */
/* background-color: #282F36; */
/* color: #FFFFFF; */
/* background-color: #FFFFFF; */
/* color: rgba(255, 255, 255, 0); */
/* background-color: rgba(255, 255, 255, 0); */
/* color: #000000; */
/* background-color: #000000; */ }
<h1 class="foo">I am foo</h1>
<h1 class="bar">I am bar</h1>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment