Skip to content

Instantly share code, notes, and snippets.

@artlung
Created June 17, 2014 21:52
Show Gist options
  • Save artlung/b17458e574ab48112ac4 to your computer and use it in GitHub Desktop.
Save artlung/b17458e574ab48112ac4 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="age-0-days-or-less">zero</div>
<div class="age-7-days-or-less">week or less</div>
<div class="age-14-days-or-less">two weeks or less</div>
<div class="age-31-days-or-less">a month or less</div>
<div class="age-60-days-or-less">two months or less</div>
<div class="age-90-days-or-less">three months or less</div>
<div class="age-365-days-or-less">a year or less</div>
// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// ----
$cutoffs: (1: 0,2: 7,3: 14,4: 31,5: 60,6: 90,7: 365, 8:3650);
$opacity-factor: (length($cutoffs)/ 80 );
@mixin background-opacity($color, $opacity: 0.3) {
background: $color; /* The Fallback */
background: rgba($color, $opacity);
}
@mixin primary-color($number, $opacity) {
$red: red;
$blue: blue;
@if $number < 1 {
$color: $red;
@include background-opacity($color, $opacity);
// text-shadow: 1px 1px 0 contrast-color( contrast-color($color));
} @else {
$color: $blue;
@include background-opacity($color, $opacity);
text-shadow: 1px 1px 0 contrast-color( contrast-color($color));
}
}
@each $index, $cutoff in $cutoffs {
.age-#{$cutoff}-days-or-less {
@include primary-color($cutoff, $opacity-factor * $index);
}
}
.age-0-days-or-less {
background: red;
/* The Fallback */
background: rgba(255, 0, 0, 0.1);
}
.age-7-days-or-less {
background: blue;
/* The Fallback */
background: rgba(0, 0, 255, 0.2);
text-shadow: 1px 1px 0 contrast-color(contrast-color(blue));
}
.age-14-days-or-less {
background: blue;
/* The Fallback */
background: rgba(0, 0, 255, 0.3);
text-shadow: 1px 1px 0 contrast-color(contrast-color(blue));
}
.age-31-days-or-less {
background: blue;
/* The Fallback */
background: rgba(0, 0, 255, 0.4);
text-shadow: 1px 1px 0 contrast-color(contrast-color(blue));
}
.age-60-days-or-less {
background: blue;
/* The Fallback */
background: rgba(0, 0, 255, 0.5);
text-shadow: 1px 1px 0 contrast-color(contrast-color(blue));
}
.age-90-days-or-less {
background: blue;
/* The Fallback */
background: rgba(0, 0, 255, 0.6);
text-shadow: 1px 1px 0 contrast-color(contrast-color(blue));
}
.age-365-days-or-less {
background: blue;
/* The Fallback */
background: rgba(0, 0, 255, 0.7);
text-shadow: 1px 1px 0 contrast-color(contrast-color(blue));
}
.age-3650-days-or-less {
background: blue;
/* The Fallback */
background: rgba(0, 0, 255, 0.8);
text-shadow: 1px 1px 0 contrast-color(contrast-color(blue));
}
<div class="age-0-days-or-less">zero</div>
<div class="age-7-days-or-less">week or less</div>
<div class="age-14-days-or-less">two weeks or less</div>
<div class="age-31-days-or-less">a month or less</div>
<div class="age-60-days-or-less">two months or less</div>
<div class="age-90-days-or-less">three months or less</div>
<div class="age-365-days-or-less">a year or less</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment