作者:唲戲2502873263 | 来源:互联网 | 2022-12-19 13:43
如何为同一个mixin定义多个名称并支持内容块?
定义
@mixin desktop-breakpoint {
@media only screen and (min-width: 769px) {
@content;
}
}
@mixin large-breakpoint {
@include desktop-breakpoint;
}
用法
.my-class {
font-size: small;
@include desktop-breakpoint {
font-size: big;
}
}
.my-other-class {
color: red;
@include large-breakpoint {
color: blue;
}
}
错误信息
Mixin“大断点”不接受内容块。
Terry..
5
在mixin中@content
使用时@include desktop-breakpoint
,您不会传递任何东西large-breakpoint
。这样做将解决您的编译错误:
@mixin large-breakpoint {
// Remember to pass content received by mixin to @include
@include desktop-breakpoint {
@content;
}
}
然后,您的CSS将按预期正确编译:
.my-class {
font-size: small;
}
@media only screen and (min-width: 769px) {
.my-class {
font-size: big;
}
}
.my-other-class {
color: red;
}
@media only screen and (min-width: 769px) {
.my-other-class {
color: blue;
}
}
请参阅基于修改后的代码的概念验证示例:https : //www.sassmeister.com/gist/3109af060293eed0b89a22c27fa20527
1> Terry..:
在mixin中@content
使用时@include desktop-breakpoint
,您不会传递任何东西large-breakpoint
。这样做将解决您的编译错误:
@mixin large-breakpoint {
// Remember to pass content received by mixin to @include
@include desktop-breakpoint {
@content;
}
}
然后,您的CSS将按预期正确编译:
.my-class {
font-size: small;
}
@media only screen and (min-width: 769px) {
.my-class {
font-size: big;
}
}
.my-other-class {
color: red;
}
@media only screen and (min-width: 769px) {
.my-other-class {
color: blue;
}
}
请参阅基于修改后的代码的概念验证示例:https : //www.sassmeister.com/gist/3109af060293eed0b89a22c27fa20527