假设定义了一个minxin

@mixin breakpoint($point) {
	@if $point == big {
		@media (max-width: 1024px) { @content; }
	}
	@else if $point == middle {
		@media (max-width: 800px) { @content; }
	}
	@else if $point == small {
		@media (max-width: 320px)  { @content; }
	}
}

很简单的一个定义,即对三种不同的分辨率进行了定义,现在我需要根据不同的分辨率来调整body的背景色,于是我这样写了下来:

body{
	background-color:black;
	@include breakpoint(small){
		background-color:blue;
	}
	
	@include breakpoint(middle){
		background-color:green;
	}

	@include breakpoint(big){
		background-color:red;
	}
}

到浏览器刷新后,发现只有当窗口大小到<=1024px的时候进行了一次变色(即body变成红色),为什么呢?为什么分辨率到达800px320px的时候没有反应呢?其实仔细想了一下很简单,因为@include breakpoint(big)是在最后调用的,前面的smallmiddle起作用了,但因为后面的1024大于800和320,覆盖了前面。

而我们把调用的地方改成这样就可以了:

body{
	@include breakpoint(big){
		background-color:red;
	}
	@include breakpoint(middle){
		background-color:green;
	}
	background-color:black;
	@include breakpoint(small){
		background-color:blue;
	}
}

(小小的提示记在这里 \^_^/)