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;
}
本文来自博客园,作者:小虾米吖~,转载请注明原文链接:https://www.cnblogs.com/LindaBlog/p/10396139.html
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」