考虑以下 SASS 代码。我想确保如果屏幕在 1250px
以上,则 margin-top
应该是 750px
然后它应该根据大小改变。但是 SASS 不允许我更新字符串中的变量。
// Above 1250px
$pageTemplateMargin:750px;
// Below 1250px
@media screen and (max-width:1250px){
$pageTemplateMargin:550px;
}
// Below 950px
@media screen and (max-width:950px){
$pageTemplateMargin:450px;
}
@media screen and (max-width:850px){
$pageTemplateMargin:150px;
}
@media screen and (max-width:750px){
$pageTemplateMargin:250px;
}
// Render the correct code
.page-template {margin-top:$pageTemplateMargin}
有没有更好的方法,因为它不起作用并且 page-template
保持在 750px
。
谢谢
最佳答案
我同意公认的答案,即在这种情况下最好使用 maps
,但我想指出几件事。
变量实际上可以在媒体查询中更新。问题是在 block 外定义的变量是全局变量,而在 block 内定义的变量是局部变量。您可以使用 !global 关键字让 sass 将 block 中的变量视为全局变量。
$pageTemplateMargin:750px;
@media screen and (max-width:1250px){
$pageTemplateMargin: 550px !global;
}
.page-template {
margin-top: $pageTemplateMargin //will use 550px instead of 750px
}
只是想澄清一下,虽然在这个用例中不合适,但这是可能的。
我还建议为您的代码使用一个循环
,这将很有帮助,尤其是当您添加更多屏幕宽度和边距属性时,您就不需要进一步编写更多媒体查询。
$breakpoints: (
1200px: 10px,
1000px: 15px,
800px: 20px,
);
@each $width, $margin in $breakpoints {
@media screen and (max-width: $width) {
.element {
margin-top: $margin;
}
}
}
希望这对您有所帮助。
关于css - 我可以在媒体查询中更新 SASS 变量吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40739695/