app/assets/stylesheets/base/mixins.scss
@mixin respond-to($name) {
// If the key exists in the map
@if map-has-key($breakpoints, $name) {
// Prints a media query based on the value
@media #{map-get($breakpoints, $name)} {
@content;
}
}
// If the key doesn't exist in the map
@else {
@warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
+ "Please make sure it is defined in `$breakpoints` map.";
}
}
@mixin vertical-align($element-half-height: 0) {
top: 50%;
margin-top: -$element-half-height;
}