在编写响应式开发的过程中,常常使用媒体查询:
.header {
width: 1000px;
}
@media screen and (min-width: 768px) {
.header {
width: 500px;
}
}
而对于多条媒体查询,这种写法显得重复率较高,而合并的写法又不利于代码的阅读,因此可以通过结合 mixin 混入的方法实现媒体查询。
@mixin ipad {
@media screen and (min-width: 768px) {
@content;
}
}
其中,@content
指明了使用mixin处传过来的代码块,使用方法如下:
.header {
width: 1000px;
@include ipad {
width: 500px;
}
}
width: 500px;
即实现了对 @content
的替换
同样地,根据之前的知识,mixin 可以接收参数,例如可以通过 $height
接收传过来的高度值,再赋值给内部属性。
完整代码如下:
main.scss
@mixin ipad($height) {
@media screen and (min-width: 768px) {
height: $height;
@content;
}
}
.header {
width: 1000px;
@include ipad(100px) {
width: 500px;
}
}
.footer {
color: blue;
@include ipad(200px) {
color: red;
}
}
编译后 css 代码如下:
.header {
width: 1000px;
}
@media screen and (min-width: 768px) {
.header {
height: 100px;
width: 500px;
}
}
.footer {
color: blue;
}
@media screen and (min-width: 768px) {
.footer {
height: 200px;
color: red;
}
}/*# sourceMappingURL=main.css.map */
— END —