說到媒體查詢我想到的就是麻煩，要寫很多代碼，而且難懂善绎。當(dāng) Sass 推出了 @mixin 和 @content 后一切就感覺很舒服了。
例子
我們從一個(gè)例子說起蹦骑。比如我們想在寬度不同時(shí)候去變化背景色。
- 0px ~ 500px 綠色
- 501px ~ 1024px 紅色
- 1025 以上都是藍(lán)色
使用 CSS 的媒體查詢會(huì)寫成這樣：
@media (max-width: 500px) {
.container {
background: green;
}
}
@media (min-width: 501px) and (max-width: 1024px) {
.container {
background: red;
}
}
@media (min-width: 1025px) {
.container {
background: blue;
}
}
要是代碼多起來完全不知道這個(gè) max-width: 500px 是個(gè)什么鬼臀防。
Sass 重寫
Sass 提供了 @mixin 語法眠菇，其本質(zhì)上和函數(shù)差不多边败，可以理解成返回的東西是 CSS 代碼（當(dāng)然 Sass 也有函數(shù) @function 一說，這里不過是做一下類比）捎废。如下面就是將 background: $bgColor 代碼寫到 .container 里笑窜。
@mixin setBackgroundColor($bgColor) {
background: $bgColor
}
.container {
$bgColor: 'blue';
@include setBackgroundColor($bgColor)
}
Sass 同時(shí)還引進(jìn)了 @content，這就讓媒體查詢變得更容易理解了登疗。上面的代碼可以寫成這樣：
@mixin phone {
@media (max-width: 500px) {
@content;
}
}
@mixin ipad {
@media (min-width: 501px) and (max-width: 1024px) {
@content;
}
}
@mixin pc {
@media (min-width: 1025px) {
@content;
}
}
body {
@include phone {
background: green;
}
@include ipad {
background: red;
}
@include pc {
background: blue;
}
}
@content 就像是變量排截，這個(gè)變量表示了 @include 花括號(hào)里的代碼。這樣就可以不用每個(gè) @media 里都寫一遍 CSS 代碼了辐益，直接在 CSS 代碼里 @include 對(duì)應(yīng)的 Mixin 就好了断傲。而且易讀性很高，這樣的代碼傻子都能看懂智政，phone 是 xxx 樣式认罩，ipad 是 yyy 樣式，pc 是 zzz 樣式续捂，一目了然垦垂。
