@mixin content($color:red,$fontSize:14px){
color:$color;
font-size: $fontSize;
}
/*调用含参数的mixin,使用更加灵活
1、传递多个属性的参数时需要指定变量名,否则将无法找到是哪个属性
2、一个参数需传递多个参数值时,需在参数末尾加上三个点即表示可传递多个参数值;
*/
body{
@include content($color:blue,$fontSize:18px);
}
@mixin box-shadow($box-shadow...){
box-shadow: $box-shadow;
-moz-box-shadow:$box-shadow;
-webkit-box-shadow:$box-shadow;
}
.info{
@include box-shadow(0 0 4px #647787,0 4px 5px #ccc);
}
/*mixin传递内容(用于浏览器兼容性调整,蓝色字体部分是关键)*/
@mixin style-device-iphone{
@meida only screen and(min-device-320px) and (max-device-568px){
@content;
}
}
@include style-device-iphone{
color: #fcfc;
font-size: 14px;
}
@mixin style-v1{
@media only screen and (max- 1024px){
@content;
}
}
@include style-v1{
90%;
height: 99%;
font-size: 18px;
}
@mixin style-v2{
@media only screen and (min- 1025px) and (max- 1440px){
@content;
}
}
@include style-v2{
880px;
height: 950px;
}