Возврат медиа-запросов с помощью миксинов

Question

Я хочу создать миксин, который бы возвращал обычный блок CSS, а также блок CSS медиазапроса. $base-width будет 100vw для мобильных устройств и 33vw для настольных компьютеров.

Пример использования:

.app {
    @include responsive {
        width: $base-width/2;
    }
}

и он в основном скомпилируется в:

.app {
  width: 100vw/2;     // for mobile devices
  
  @media screen and (min-width: 992px) {
    width: 33vw/2;    // for desktop since $base-width: 33vw;
  }
}

Свойство левой руки может быть любым, не всегда width.

Возможно ли это? Что может быть возможным ближайшим решением?

Спасибо!

Answer 1

 @mixin breakpoint($point) {
    @media (min-width: $point) { @content; } 
}

.app {
  width: 100vw/2;     // for mobile devices
  @include breakpoint(992px){
     width: 33vw/2; // for desktop since
  }
}

Это гибкий способ сделать это.