Skip to content

Instantly share code, notes, and snippets.

@kopepasah
Last active July 10, 2018 01:22
Show Gist options
  • Save kopepasah/34ec2dd36abfc8ee3b7ea2feb518225c to your computer and use it in GitHub Desktop.
Save kopepasah/34ec2dd36abfc8ee3b7ea2feb518225c to your computer and use it in GitHub Desktop.
@mixin breakpoint( $start, $stop: null ) {
$breakpoints: (
'small': 480px,
'medium': 720px,
'large': 960px,
'huge': 1200px,
'container': $container,
);
$start: validate-point( $start, $breakpoints );
@if $stop {
$stop: validate-point( $stop, $breakpoints );
@media ( min-width: $start ) and ( max-width: $stop ) {
@content;
}
} @else {
@media ( min-width: $start ) {
@content;
}
}
}
@function validate-point( $point, $breakpoints ) {
@if map-get( $breakpoints, $point ) {
$point: map-get( $breakpoints, $point );
} @elseif 'number' == type-of( $point ) {
@if unitless( $point ) {
@error "Using custom breakpoints requires units (i.e. px), was #{$point}.";
}
} @else {
@error "Neither a set or custom breakpoint was provided, was #{$point}.";
}
@return $point;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment