Css 基于媒体查询更改变量值

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

$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;
}

---

有什么方法可以做到这一点吗？

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

你能做的是：

$avatar\u大小：200px；
$avatar_平板电脑：150像素；
$avatar_手机：100px；
@媒体（#{$tablet_size}）{
img{
宽度：$avatar_平板电脑；
身高：$avatar_平板电脑；
}
}
@媒体（#{$mobile_size}）{
img{
宽度：$avatar_手机；
身高：$avatar_手机；
}
}

CSS变量（和SASS变量）不能指定为属性，只能指定值

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

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

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

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

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

这将评估：

.a {
  color: red;
}

.b {
  background-color: red;
}

这可以在中看到

请注意，这也可以通过原始CSS实现。这是用完成的，在

：root

选择器中用双连字符前缀表示：

：根目录{
--颜色：红色；
}
.a{
颜色：var（--颜色）；
}
.b{
背景色：var（--色）；
}

1
两个

如果大小是这样固定的，您可以创建一个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');
}

---

我猜你不会在字体大小和宽度/高度上使用相同的值，但既然你在问题中显示了这一点，我的答案也显示了这一点。

如果使用PostCs，请尝试以下方法：

@自定义媒体-小视口（最大宽度：30em）；
@媒体（--小视口）{
/*小视口的样式*/
}
/*变成*/
@介质（最大宽度：30em）{
/*小视口的样式*/
}

尝试使用替代SASS变量

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

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

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

这将根据屏幕大小更改

svg

元素的宽度

用它来做实验

注意：如果要将CSS自定义属性与SASS表达式一起使用，必须将它们包装在

{}

中

---

这与问题有什么关系？@Sam——通过提供答案？如果您不同意，请随意添加您自己的答案。我喜欢像你这样的人如此迅速地提出批评，但似乎很少能为“错误”的答案提供另一种解决方案。我也喜欢那些回答问题却不明白问题是关于什么的人=）这是不正确的。您可以使用scss（Sass）变量作为属性。

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

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

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