@import "kickoff-functions-and-mixins.scss"

 $grid-configuration: (
   'columns': 12,
   'layouts': (
     'small': 800px,
     'medium': 1000px,
     'large': 1200px,
   ),
 );
 
 div {
   font-size: map-deep-get($grid-configuration, 'columns');
   width: map-deep-get($grid-configuration, 'layouts', 'medium');
 }

// Used in the kickoff $type sass map variable 
modular-scale($font-size-base, -1, $type-scale)
modular-scale($font-size-base, 0, $type-scale)
modular-scale($font-size-base, 1, $type-scale)

// Add percentage of white to a color 
background-color: tint(blue, 20%);
 
// Add percentage of black to a color 
background-color: shade(blue, 20%);

@include hidpi {
    ...
}

@include position(absolute, 10px 20px 30px 10px);

// min-width 
// Equivalent to: @media screen and (min-width: 20em) { ... } 
@include respond-min(mid) { ... }; // uses the $breakpoints sass-map 
@include respond-min(650) { ... }; // converts to px 
 
// max-width 
// Equivalent to: @media screen and (max-width: 20em) { ... } 
@include respond-min(large) { ... }; // uses the $breakpoints sass-map 
@include respond-min(460) { ... }; // converts to px 
 
// min-max-width 
// Equivalent to: @media screen and (min-width: 10em) and (max-width: 20em) { ... } 
@include respond-min-max(narrow, large) { ... }; // uses the $breakpoints sass-map 
@include respond-min-max(460, 900) { ... }; // converts to px 

@include vertical-center;