Sass-根据媒体查询更改变量值

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

尝试使用CSS 自定义属性而不是 SASS 变量。

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

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

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

svg这将根据屏幕尺寸更改元素的宽度。

只需使用JSFiddle进行实验即可。

注意：如果您想将 CSS 自定义属性与 SASS 表达式一起使用，则必须将它们包装在#{}. 阅读有关 SASS 中 CSS 自定义属性支持的更多信息。

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

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

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

Answer 2

这是不可能的，将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 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');
}

我猜您不会真正使用与宽度/高度相同的字体大小值，但是由于您在问题中显示了这一点，因此我的回答也显示了这一点。