Установка цвета фона дочернего элемента в SASS в зависимости от ширины родительского элемента (SASS)

Question

Я новичок в SASS.На самом деле я хочу установить фоновый интервал внутри класса (.someClass) как «желтый» или «оранжевый» в зависимости от ширины (элемента div .someClass).Я мог бы легко сделать то же самое в jQuery, но здесь я должен сделать в React, поэтому пытаюсь достичь с помощью SASS.Может кто-нибудь помочь мне с правильным синтаксисом.Я слышал, можно использовать переменные и условные выражения в SASS, так что попробуйте.

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

Пожалуйста, кто-нибудь, помогите мне!

Answer 1

Вы можете попробовать это сделать, используя миксин:

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

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

Answer 2

Вы можете определить ширину области просмотра и установить стили соответственно с помощью медиа-запросов .

Для изменения стилей одного элемента в зависимости от размера другого потребуется использование JavaScript. Переменные Sass, функции и условия не работают так, как вы описываете, так как они рассчитываются во время компиляции и выводятся в обычный CSS.