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

【问题标题】：Setting background color of child element in SASS depending on width of parent element (SASS)根据父元素（SASS）的宽度在SASS中设置子元素的背景颜色
【发布时间】：2019-06-20 10:40:21
【问题描述】：

我是 SASS 的新手。实际上，我想根据（.someClass div 元素）的宽度将类（.someClass）内的跨度背景设置为“黄色”或“橙色”。我可以很容易地在 jQuery 中做同样的事情，但在这里我必须在 React 中做，所以尝试通过SASS 来实现。有人可以用正确的语法帮助我。我听说可以在 SASS 中使用变量和条件，所以尝试一下。

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

请有人帮帮我！

【问题讨论】：

我是 SASS 新手，这似乎是一个有效的问题！ :/ ...我听说可以在 SASS 中使用变量和 if-else 函数来完成这些项目。我错了吗？

标签： html css reactjs sass

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

您可以使用media queries 检测视口的宽度并相应地设置样式。

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

【讨论】：