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时，变量被赋值。

你可以做的是：

＆＃13;

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

＆＃13;

Answer 2

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

我猜你不会真正使用相同的font-size值和宽度/高度值，但是因为你在问题中表明了这一点，我的回答也表明了这一点。

Answer 3

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 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 对其进行试验。

注意：如果您想在 SASS 表达式中使用 CSS 自定义属性，则必须将它们包装在 #{} 中。 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);
}

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

5 个答案: