我可以在媒体查询中更新SASS变量吗？

Question

考虑以下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。

谢谢

Answer 1

我同意已接受的答案，maps在这种情况下最好使用，但我想指出几点。

实际上，变量可以在媒体查询中进行更新。问题在于，在块外部定义的变量是全局变量，而在块内部定义的变量是局部变量。您可以使用！global关键字让sass将块中的变量视为全局变量。

$pageTemplateMargin:750px;

@media screen and (max-width:1250px){
    $pageTemplateMargin: 550px !global;
}

.page-template {
  margin-top: $pageTemplateMargin //will use 550px instead of 750px
}

只是想澄清一下，尽管在此用例中不合适，这是可能的。

我还建议loop为您的代码使用a ，这将被证明是有用的，特别是当您添加更多的屏幕宽度和边距属性时，您无需进一步编写更多的媒体查询。

$breakpoints: (
  1200px: 10px,
  1000px: 15px,
  800px: 20px,
);

@each $width, $margin in $breakpoints {
  @media screen and (max-width: $width) {
    .element {
      margin-top: $margin;
    }
  }
}

希望这可以帮助。

Answer 2

不，你不能（在这种情况下，正如另一个答案中所指出的那样）。

我建议使用它mixins来处理：

@mixin pageTemplateMargin($px) {
    margin-top: $px
}

@media screen and (max-width:1250px) {
    .element { @include pageTemplateMargin(10px);}
}
@media screen and (max-width:1000px) {
    .element { @include pageTemplateMargin(15px);}
}
@media screen and (max-width:800px) {
    .element { @include pageTemplateMargin(20px);}
}

还有一种通过 sass 对象进行映射的方法，例如：

$breakpoints: (
  1200: 10px,
  1000: 15px,
  800: 20px,
);

@media screen and (max-width:1200px) {
    .element { margin-top: map-get($breakpoints, 1200);}
}
@media screen and (max-width:1000px) {
    .element { margin-top: map-get($breakpoints, 1000);}
}
@media screen and (max-width:800px) {
    .element { margin-top: map-get($breakpoints, 800);}
}

这将允许您通过调整 1 个变量来全局更改边距。

工作代码笔示例