scss混合优化媒体查询书写

采用scss的混合和继承优化css的媒体查询代码书写

原写法

.header {
    width: 100%;
}
@media (min-width: 320px) and (max-width: 480px) {
    .header {
        height: 50px;
    }
}
@media (min-width: 481px) and (max-width: 768px) {
    .header {
        height: 60px;
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .header {
        height: 70px;
    }
}
@media (min-width: 1025px) and (max-width: 1200px) {
    .header {
        height: 80px;
    }
}
@media (min-width: 1026px) {
    .header {
        height: 90px;
    }
}

scss优化写法

$breakpoints: (
	'phone': (320px, 480px),
	'pad': (481px, 768px),
	'notebook': (769px, 1024px),
	'desktop': (1025px, 11200px),
	'tv': 1201px
)
    
@mixin responseTo($breakname) {
    $bp: map-get($breakpoints, $breakname);
    @if type-of($bp) == 'list' {
    	@media (min-width: nth($bp, 1)) and (max-width: nth($bp,2)) {
            @content; 
        }
    } @else {
        @media (min-width: $bp) {
            @content;
        }
   	}
}

header {
    width: 100%;
    @include responseTo('phone') {
        height: 50px;
    }
    @includee responseTo('pad') {
        height: 60px;
    }
    @include responseTo('notebook') {
        height: 70px;
    }
    @include responseTo('desktop') {
        height: 80px;
    }
    @includee responseTo('tv') {
        height: 90px;
    }
}