我可以更新媒体查询中的 SASS 变量吗？答案

【问题标题】：Can I update SASS variables in Media Queries?我可以更新媒体查询中的 SASS 变量吗？
【发布时间】：2017-04-06 00:00:52
【问题描述】：

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

谢谢

【问题讨论】：

请注意@media 查询在客户端触发，您的 sass 变量正在服务器端处理。我最好的选择是使用@mixin 之类的。
为什么不将边距声明放在媒体查询中？

标签： css sass

【解决方案1】：

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

我建议使用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 个变量来全局更改边距。

Working codepen example

【讨论】：

这看起来不错。除非可以进一步减少，否则我会接受
有一种方法可以将其划分为对象，这将使这种方法更加模块化，让我进一步搜索一下。
我用一个工作示例更新了我的代码，@TheBlackBenzKid

【解决方案2】：

我同意接受的答案，在这种情况下最好使用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，这将非常有用，尤其是在您添加更多屏幕宽度和边距属性时，这样您就无需进一步编写更多媒体查询。

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

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

希望这会有所帮助。

【讨论】：

好的答案，赞成，作为旁注：您还必须在答案的$width 部分应用px，因为现在max-width: $width 不包含单位。
我也对此表示赞同并将其标记为正确答案，因为它本质上是问题的答案，尽管地图可能对其他人来说是更好的解决方案。

【解决方案3】：

我已经尝试过了，然后我解决了我的问题。它会根据给定的速率（base-size/rate-size）自动计算所有的媒体断点


$base-size: 16;
$rate-size-xl: 24;

    // set default size for all cases;
    :root {
      --size: #{$base-size};
    }

    // if it's smaller then LG it will set size rate to 16/16;
    // example: if size set to 14px, it will be 14px * 16 / 16 = 14px
    @include media-breakpoint-down(lg) {
      :root {
        --size: #{$base-size};
      }
    }

    // if it is bigger then XL it will set size rate to 24/16;
    // example: if size set to 14px, it will be 14px * 24 / 16 = 21px
    @include media-breakpoint-up(xl) {
      :root {
        --size: #{$rate-size-xl};
      }
    }

@function size($px) {
   @return calc(#{$px} / $base-size * var(--size));
}

div {
  font-size: size(14px);
  width: size(150px);
}

【讨论】：