_settings.scss

// settings and supporting mixins for scss projects

$breakpoints: (
  watch: 42mm,
  phone-p: 375px,
  phone-l: 630px,
  tablet-p: 740px,
  tablet: 900px,
  tablet-l: 1023px,
  mobile: 740px,
  mobile-p: 375px,
  menu-desktop: 920px,
  desktop-small: 1024px,
  menu-desktop-large: 1170px,
  desktop: 1200px,
  desktop-large: 1400px,
  desktop-huge: 1600px,
);

$colors: (
  text-normal: #333,
  text-dark: #000,
);


// these are various numerical values.
// add them here and name them -- prevents having "magic numbers" sprinkled around the code
$numbers: (
  w-desktop-max-width: 1180px,
);


.debug {
  outline: 1px solid green;
}


@function c($the-color) {
  @return map-get($colors, $the-color);
}

@function bp($the-bp) {
  @return map-get($breakpoints, $the-bp);
}

@function n($the-number) {
  @return map-get($numbers, $the-number);
}

// tint and shade based on Hotbot Bourbon

// Add percentage of white to a color
@function tint($color, $percent){
  @return mix(white, $color, $percent);
}

// Add percentage of black to a color
@function shade($color, $percent){
  @return mix(black, $color, $percent);
}