Custom SCSS Media Queries

Custom_SCSS_Media_Queries.md

MIXIN: Custom SCSS Responsive Media Queries.

@author Ankit Hingarajiya (https://github.com/dropways)

Creates responsive media queries for different screen resolution.

CSS content goes inside {} brackets.

min-width or max-width mixin

@mixin breakpoint( $max_min , $point ) {
	@if $max_min==min{
		@media ( min-width: ($point + px) ) {
			@content;
		}
	} @if $max_min==max{
		@media ( max-width: ($point + px) ) {
			@content;
		}
	}
}

How to use min or max width

.menu-link{
	padding: 15px 45px;
	@include breakpoint( max , 767){
		padding: 10px 25px;
	}
	@include breakpoint( min , 1366){
		padding: 15px 35px;
	}
}

min-width & max-width mixin

@mixin breakpoint-between($lower, $upper) {
	@media (min-width: ($lower + px)) and (max-width: ($upper + px)) {
    	@content;
	}
}

How to use min-width & max-width

.menu-link{
	padding: 15px 45px;
	@include breakpoint-between( 768 , 1024){
		padding: 10px 25px;
	}
	@include breakpoint-between( 1025 , 1366){
		padding: 15px 35px;
	}
}