.scs、media quires、@content和纯波旁威士忌

Question

我使用的是Bourbon Neat，但我希望编译后的css不要不断重复每个元素的媒体查询，而是先按移动顺序编译。

我的scs看起来像这个

    #logo {
        @include span-columns(3);
        @include media($mobile) {
            @include span-columns(2);
          }
    }
    nav {
        @include span-columns(6);
        text-align: center;
        li {
            display: inline-block;
            }
            @include media($mobile) {
                @include span-columns(2);
                text-align: right;
              }
    }
    #social {
        @include span-columns(3);
        text-align: right;
        li {
            display: inline-block;
            }
        @include media($mobile) {
            display:none;
          }
}

如何实现组织更干净的编译css？

这是我现在得到的：

#logo {
  display: block;
  float: left;
  margin-right: 2.35765%;
  width: 23.23176%; }
  #logo:last-child {
    margin-right: 0; }
  @media screen and (max-width: 480px) {
    #logo {
      display: block;
      float: left;
      margin-right: 7.42297%;
      width: 46.28851%; }
      #logo:last-child {
        margin-right: 0; } }
nav {
  display: block;
  float: left;
  margin-right: 2.35765%;
  width: 48.82117%;
  text-align: center; }
  nav:last-child {
    margin-right: 0; }
  nav li {
    display: inline-block; }
  @media screen and (max-width: 480px) {
    nav {
      display: block;
      float: left;
      margin-right: 7.42297%;
      width: 46.28851%;
      text-align: right; }
      nav:last-child {
        margin-right: 0; } }
#social {
  display: block;
  float: left;
  margin-right: 2.35765%;
  width: 23.23176%;
  text-align: right; }
  #social:last-child {
    margin-right: 0; }
  #social li {
    display: inline-block; }
  @media screen and (max-width: 480px) {
    #social {
      display: none; } }

我尝试过在顶部使用@content技术：

$mobile: new-breakpoint(max-width 480px 4);
@mixin breakpoint($point) {
  @if $point == small {
    @include media($mobile) { @content; }
  }

并将@include更改为：

#logo {
    @include span-columns(3);
    @include breakpoint(small) {
        @include span-columns(2);
      }
}

如有任何帮助，我们将不胜感激：）

Answer 1

为了首先对移动设备进行编码，您需要为移动设备制作标准样式，然后使用媒体查询在更大的屏幕上扩展您的设计。此外，请确保使用min-width标记而不是max-width，并仅在需要时引入特定于布局的规则。

您可以先在这里阅读更多关于移动设备的信息：http://adamkaplan.me/grid/

使用波旁威士忌的例子：

    ul.navigation-list {
    display:none;
        @include media($large-screen) {
            display:block;
        }
    }