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;}
}