根据媒体查询更改变量值 [英] Changing variable value based on media query

问题描述

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

I'd like to use the same variable for different media queries. Something like this:

$avatar_size: 200px;

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

目标是能够在多个位置使用此变量，因此我可以引用该变量，而不必每次都进行媒体查询.像这样:

The objective is to be able to use this variable in multiple places, so I can just reference the variable and not have to throw in the media queries every time. Like so:

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

有什么办法吗?

推荐答案

这是不可能的，将Sass编译为CSS时会为变量分配值.

This is impossible, variables are assigned values when the Sass is compiled to 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;
  }
}

这篇关于根据媒体查询更改变量值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！