随笔 - 315  文章 - 1  评论 - 12  阅读 - 24万

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;
}

posted on   小虾米吖~  阅读(528)  评论(0编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」

点击右上角即可分享
微信分享提示