Question

我正在使用Bourbon Neat，但我希望编译后的css不再为每个元素重复媒体查询，而是先按顺序编译它。

我的scss看起来像这样

    #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/

使用Bourbon Neat的例子：

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

.scss，媒体查询，@ content和bourbon整洁

1 个答案: