根据父元素的宽度（SASS）在SASS中设置子元素的背景颜色

Question

我是SASS的新手。 实际上，我想基于（.someClass div元素）的宽度将类（.someClass）内的跨度的背景设置为“黄色”或“橙色”。 我可以轻松地在jQuery中执行相同的操作，但是在这里我必须在React中执行操作，因此尝试通过SASS实现。 有人可以通过正确的语法帮助我。 我听说可以在SASS中使用变量和条件，所以请尝试一下。

@if ('.someClass').width < 90px {
 & > span {background:yellow;}
}
else {
 & > span {background:orange;}
}

拜托，有人帮我！

Answer 1

您可以尝试使用mixins执行此操作：

$width:auto;
@mixin background($width) {

  @if $width <= '90px' {
    background:red;
  } @else {
    background:blue;
  }
}

Answer 2

您可以检测视口的宽度，并通过媒体查询相应地设置样式。

要根据另一个元素的大小更改一个元素的样式，将需要使用JavaScript。 Sass变量，函数和条件以您描述的方式工作，因为它们是在编译时计算并输出到常规CSS的。