### **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动画效果