根据媒体查询更改变量值

Question

我想对不同的媒体查询使用相同的变量。像这样的：

$avatar_size: 200px;

@media (#{$tablet_size}) {
  $avatar_size: 150px;
}
@media (#{$mobile_size}) {
  $avatar_size: 100px;
}

目标是能够在多个地方使用这个变量，所以我可以只引用这个变量，而不必每次都抛出媒体查询。像这样：

.font-awesome-icon {
  font-size: $avatar_size;
}
img {
  width: $avatar_size;
  height: $avatar_size;
}
.img-wrapper {
  height: $avatar_size;
}

有什么办法吗？

Answer 1

这是不可能的，当 Sass 编译成 CSS 时，变量会被赋值。

你可以这样做：

$avatar_size: 200px;
$avatar_tablet: 150px;
$avatar_mobile: 100px;

@media (#{$tablet_size}) {
  img {
    width: $avatar_tablet;
    height: $avatar_tablet;
  }
}

@media (#{$mobile_size}) {
  img {
    width: $avatar_mobile;
    height: $avatar_mobile;
  }
}

Answer 2

CSS 变量（和 SASS 变量）不能作为属性赋值，只能赋值为值。

设置变量的重点是能够修改变量并将更改反映在多个位置。考虑到变量是为了改变而设计的，在不同的场景（比如媒体查询）中给它不同的值是没有意义的。在这种情况下，您需要定义多个变量。

就 SASS 而言，您需要定义标准 CSS 属性，然后然后自定义变量（用作 值）：

$colour: red;

.a {
  color: $colour;
}

.b {
  background-color: $colour;
}

这将评估为：

.a {
  color: red;
}

.b {
  background-color: red;
}

这可以在 this JSFiddle 中看到。

请注意，这也可以通过原始 CSS 来实现。这是通过CSS variables 完成的，在:root 选择器中用双连字符前缀表示：

:root {
  --colour: red;
}

.a {
  color: var(--colour);
}

.b {
  background-color: var(--colour);
}

<div class="a">One</div>
<div class="b">Two</div>

希望这会有所帮助:)

Answer 3

如果尺寸是这样固定的，您可以创建一个以属性值为输入的 mixin：

@mixin avatar_size($prop) {
  #{$prop}: 200px;
  @media (#{$tablet_size}) {
    #{$prop}: 150px;
  }
  @media (#{$mobile_size}) {
    #{$prop}: 100px;
  }
}

.font-awesome-icon {
  @include avatar_size('font-size');
}
img {
  @include avatar_size('width');
  @include avatar_size('height');
}
.img-wrapper {
  @include avatar_size('height');
}

我猜你不会真的使用与宽度/高度相同的字体大小值，但既然你在问题中表明了这一点，我的回答也表明了这一点。

Answer 4

如果使用 postcss，试试这个：https://github.com/postcss/postcss-custom-media

@custom-media --small-viewport (max-width: 30em);

@media (--small-viewport) {
  /* styles for small viewport */
}

/* becomes */

@media (max-width: 30em) {
  /* styles for small viewport */
}

Answer 5

尝试使用 CSS custom properties 代替 SASS 变量。

@media (min-width: 300px) {
  :root {
    --width: 250px;
  }
}

@media (min-width: 600px) {
  :root {
    --width: 450px;
  }
}

svg {
  width: var(--width);
}

这将根据屏幕大小改变svg 元素的宽度。

只需使用this JSFiddle 进行试验。

注意：如果您想将 CSS 自定义属性与 SASS 表达式一起使用，您必须将它们包装在 #{} 中。 Read more about CSS custom property support in SASS.

@media (min-width: 300px) {
  :root {
    --width: #{$small-width};
  }
}

@media (min-width: 600px) {
  :root {
    --width: #{$wide-width};
  }
}

svg {
  width: var(--width);
}