gpt4 book ai didi

用于媒体查询的 SASS 占位符?

转载 作者:行者123 更新时间:2023-12-04 02:51:12 38 4
gpt4 key购买 nike

我发现这种方法可以使用 mixin 轻松添加 @media block :

@mixin phone() {
@media only screen and (max-width: 480px) {
@content;
}
}

要使用它,只需简单地输入如下内容:

p {
@include phone { ... }
span {
@include phone { ... }
}
}

问题在于真正的 CSS 输出:

@media only screen and (max-width: 480px) {
p { ... }
}
@media only screen and (max-width: 480px) {
p span { ... }
}

复制 @media ... 部分会使 CSS 膨胀。

有没有办法让 mixin 像占位符一样工作?所以它将合并所有的 @content 并将其放在同一个 @media ... block 下。

所以结果会是这样

@media only screen and (max-width: 480px) {
p { ... }
p span { ... }
}

我知道我可以将 @include phone 放在文件末尾,然后在该 block 中写入所有必要的样式。

但在原始样式之外编写媒体查询样式使其更易于阅读和组织。

谢谢

最佳答案

Sass 目前没有这个功能。您唯一的选择是在单个媒体查询中手动对您的样式进行分组(或使用具有该功能的第 3 方 CSS 压缩器)。

https://github.com/nex3/sass/issues/116

关于用于媒体查询的 SASS 占位符?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17619493/

38 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com