### **1.9 @content在sass中作用** <br/> **作用：**主要是拿來傳遞內容到**Mixin**里面去，像是一般的**Mixin**大家認認知的就是他能夠傳遞變量進去。 一般Mixin列子： ~~~ @mixin bg($text-color,$bg-color){ background: $bg-color; color: $text-color; } .box{ @include bg(#fff,#000) } //編譯出來的CSS .box{ background: 000; color: #fff; } ~~~ <br/> <br/> **已上列子如果使用了@content的話，就能在Mixin里面繼續寫額外的東西。**（即將額外的樣式寫在 @include中括號{}里面） 舉例： ~~~ @mixin bg($text-color,$bg-color){ background: $bg-color; color: $text-color; @content; //多了一個@content } .box{ @include bg(#fff,#000){ border: 1px solid lighten(#000, 10); //將額外的樣式寫在在 @include中括號{}里面。 } } ~~~ 編譯出來的css ~~~ .box { background: #000; color: #fff; border: 1px solid #1a1a1a; //對應@content中的樣式編譯于此行 } ~~~ <br/> <br/> #### **@content還可以實現的功能** <br/> **1.選擇器的繼承與覆蓋** <br/> 列子： ~~~ @mixin ie8{ .ie8 & { @content } } .box{ width:50px @include ie8{ width:150px//將會繼承混合宏里面的.ie8 &，&將在這里繼承.box } } //編譯出來的CSS .box { width:50px } .ie8 .box { width:150px } ~~~ <br/> <br/> <br/> **2.狀態** 有時候在設計網頁時，需要對各種點擊狀態進行設置，如：hover，：visited，： foucs以及動態連接時會加上.active這個class。像這些都可成為狀態的改變，也可以通過@mixin和@content來規劃。 舉例： ~~~ @mixin link{ //鏈接樣式 &:link,&:visited{ @content; } } @mixin link-hover{ //被點擊后的樣式 &:hover, &:focus, &:active,&.active{ @content; } } .box{ height:50px; @include link{color:#fff}; //鏈接樣式 @include link-hover{color:#000}; //被點擊后的樣式 } ~~~ 轉化成css ~~~ .box { height: 50px; } .box:link, .box:visited { color: #fff; } .box:hover, .box:focus, .box:active { color: #000; } ~~~ <br/> <br/> <br/> **3.@content也可以寫2個以上** 列如我們時常需要寫瀏覽器前綴來進行兼容時，也可以像這樣寫： ~~~ @mixin keyframes($animation) { @-webkit-keyframes $animation{ @content; } @-moz-keyframes $animation{ @content; } @-ms-keyframes $animation{ @content; } @-o-keyframes $animation{ @content; } @keyframes $animation{ @content; } } ~~~ 這樣子編譯出來就會針對各瀏覽器去寫css3動畫效果