使用 sass mixin 的 Javascript 事件更改样式答案

【问题标题】：Javascript event change style with sass mixin使用 sass mixin 的 Javascript 事件更改样式
【发布时间】：2015-07-15 08:23:56
【问题描述】：

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

侧边栏的宽度为 280 像素，最大宽度为 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));
  }

这在台式机和平板电脑上效果很好，但在移动设备上这会导致问题。 to-right 将 body 移动 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 事件？

感谢阅读！

【问题讨论】：

.to-right 在做什么？可以加个小提琴吗？
添加了右边的代码+mixin
这和Sass有什么关系？这是一个纯 CSS 问题，只提供编译后的 CSS。
问题是我需要一个很好的替代所有前缀（如果有的话），我可以从侧边栏获取宽度并立即在 css 中使用它
是的，但是cimmanon是对的，最后用不sass无所谓，只是写起来更方便。这似乎是一个纯粹的 css 问题，如果我们不知道您期望什么行为，那么举个例子会容易得多。

标签： javascript jquery events sass width

【解决方案1】：

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

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

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

350px 是屏幕宽度，此时 80% = 280px。

【讨论】：

这是解决我问题的好方法！接受！