Cacher is the code snippet organizer for pro developers

/*** Functions ***/

/**
 * Set font color according the background
 * source: http://thesassway.com/intermediate/dynamically-change-text-color-based-on-its-background-with-sass
 * @param {String} $background - background color - format accepted: hsla, rgb, #
 * @return {String} #color
 */
@function set-text-color($background) {
  @if (lightness($background) > 50) {
    @return #000; // Lighter backgorund, return dark color
  } @else {
    @return #fff; // Darker background, return light color
  }
}

/*** Button mixins ***/

/**
 * Generate button style
 * @param {String} - $name - required
 * @param {String} - $background - required - format accepted: hsla, rgb, #
 * @param {Strong} - $color - optionnal - format accepted: hsla, rgb, #
 * If no $color specify, the 'set-text-color' function is called
 * go check the _function.scss
 */
@mixin generate-button($name, $background, $color: '') {
  .button-#{$name} {
    background: $background;
    @if ($color == '') {
      color: set-text-color($background);
    } @else {
      color: $color;
    }

    &:hover {
      background: lighten($background, 10%);
    }
  }
}

/*** Parameters ***/

// Colors
$color-primary: #666;
$color-secondary: #888;
$color-light: #e0e0e0;
$color-lightest: #efefef;
$color-brand: #239bf6;

// Brand color
$color-facebook: #3b5998;
$color-feedly: #2bb24c;
$color-github: #333;
$color-google: #dc4e41;
$color-instagram: #3f729b;
$color-linkedin: #0077b5;
$color-medium: #00ab6b;
$color-messenger: #0084ff;
$color-rss: #f26522;
$color-spotify: #2ebd59;
$color-twitter: #55acee;

// Borders
$border-light: solid 1px rgba(0, 0, 0, .05);

// Font Size
$font-size-biggest: 2.8rem;
$font-size-largest: 2.3rem;
$font-size-large: 1.2rem;
$font-size-base: 1rem;
$font-size-small: .9rem;
$font-size-smallest: .75rem;

// Spacing
$spacing-small: .75rem;
$spacing-single: 1rem;
$spacing-double: 2rem;
$spacing-triple: 3rem;
$spacing-big: 6rem;

// Media queries
$desktop: 800px;
$tablet: 600px;
$mobile: 480px;

// Font Family
$sans-serif: 'Roboto', sans-serif;
$serif: 'Playfair Display', serif;

// Animation
$anime-in: .4s;
$anime-out: .5s;