sass进阶—mixin的使用（浏览器兼容性调整）

@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-width:320px) and (max-device-width:568px){
@content;
}
}

@include style-device-iphone{
color: #fcfc;
font-size: 14px;
}

@mixin style-v1{
@media only screen and (max-width: 1024px){
@content;
}
}
@include style-v1{
width: 90%;
height: 99%;
font-size: 18px;
}

@mixin style-v2{
@media only screen and (min-width: 1025px) and (max-width: 1440px){
@content;
}
}

@include style-v2{
width: 880px;
height: 950px;
}

巴特西

sass进阶—mixin的使用（浏览器兼容性调整）

最新文章

热门文章