gpt4 book ai didi

sass - 在 CSS3 媒体查询中使用 Sass 变量

转载 作者:行者123 更新时间:2023-11-28 09:34:50 30 4
gpt4 key购买 nike

我正在尝试将 Sass 变量的使用与 @media 查询结合使用,如下所示:

$base_width:1160px;

@media screen and (max-width: 1170px) {$base_width: 960px;}
@media screen and (min-width: 1171px) {$base_width: 1160px;}

$base_width 然后在基于样式表宽度百分比的测量值的不同点定义,以生成流畅的布局。

当我这样做时,变量似乎被正确识别,但媒体查询的条件却没有。例如,无论屏幕宽度如何,上面的代码都会生成 1160px 的布局。如果我像这样翻转@media 语句:

@media screen and (min-width: 1171px) {$base_width: 1160px;}
@media screen and (max-width: 1170px) {$base_width: 960px;}

它会生成一个 960 像素的布局,同样与屏幕宽度无关。另请注意,如果我删除 $base_width: 1160px; 的第一行,它会返回 undefined variable 的错误。有什么想法我想念的吗?

最佳答案

这根本不可能。由于触发器 @media screen and (max-width: 1170px) 发生在客户端。

只有当 SASS 获取包含您的 $base_width 变量的样式表中的所有规则和属性并相应地复制/更改它们时,才有可能实现您的预​​期结果。

由于它不会自动工作,您可以像这样手动完成:

@media screen and (max-width: 1170px)
$base_width: 960px // you need to indent it to (re)set it just within this media-query
// now you copy all the css rules/properties that contain or are relative to $base_width e.g.
#wrapper
width: $base_width
...

@media screen and (min-width: 1171px)
$base_width: 1160px
#wrapper
width: $base_width
...

这不是真正的 DRY,而是你能做的最好的。

如果每次更改都相同,您还可以准备一个包含所有更改值的 mixin,这样您就不需要重复了。此外,您可以尝试将 mixin 与特定更改结合起来。喜欢:

@media screen and (min-width: 1171px)
+base_width_changes(1160px)
#width-1171-specific-element // additional specific changes, that aren't in the mixin
display: block

Mixin 看起来像这样

=base_width_changes($base_width)
#wrapper
width: $base_width

关于sass - 在 CSS3 媒体查询中使用 Sass 变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25581427/

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