假设定义了一个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变成红色)，为什么呢？为什么分辨率到达800px和320px的时候没有反应呢？其实仔细想了一下很简单，因为@include breakpoint(big)是在最后调用的，前面的small、middle起作用了，但因为后面的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;
	}
}

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