带有sass mixin的Javascript事件更改样式

我在一个有侧边栏的网站上工作。当您按下按钮时，侧边栏从左侧进入并将主体推开

侧边栏的宽度为280px，最大宽度为80%（适用于移动设备）。目前，我的javascript如下所示：

  // Left menu moves in the view
  $('.left-menu').toggleClass('in-view');
  // Moves the body to the right 280px
  $('.content-wrapper').toggleClass('to-right');

  // to-right in css
  .to-right {
      @include translate(280px, 0);
  }

  // Mixin
  @mixin transform($transforms) {
   -moz-transform: $transforms;
   -o-transform: $transforms;
   -ms-transform: $transforms;
   -webkit-transform: $transforms;
   transform: $transforms;
  }

  @mixin translate($x,
  $y) {
      @include transform(translate($x, $y));
  }

这在台式机和平板电脑上非常有效，但在移动设备上会导致问题。向右移动主体280px，但如果80%低于280px，则剩余空间

我怎样才能使它在你打开侧边栏时，移动身体，使其与侧边栏的宽度完全一致？当然，你可以这样做：

.css('-moz-transform', 'sidebar_width')
.css('-o-transform', 'sidebar_width')
.css('-ms-transform', 'sidebar_width')
.css('-webkit-transform', 'sidebar_width')
.css('transform', 'sidebar_width')

但我真的不认为那样做是正确的

有没有更好的方法来解决这个问题？某种Javascript自定义mixin事件

---

谢谢你的阅读

是的，通常最好将css和javascript分开。媒体查询是根据设备属性（如屏幕大小）提供不同样式的有用方法

.in-view {
    width: 280px;
    max-width: 80%;

    @media only screen and (max-device-width: 350px) {
        max-width: 100%;
    }
}

---

350px是80%=280px的屏幕宽度。

右边的是什么？你能添加一把小提琴吗？添加到正确的代码+混音这与Sass有什么关系？这是一个纯粹的CSS问题，只提供编译后的CSS。问题是我需要一个很好的前缀替代品（如果有），我可以从侧边栏中获得宽度，并在cssYes中立即使用，但cimmanon是正确的，使用sass与否最终无关紧要，只是更容易编写。这似乎是一个纯粹的css问题，用一个例子会容易得多，因为我们不知道你期望的是什么行为。这是我问题的一个很好的解决方案！认可的！