0

我正在使用 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);
      }

}

任何帮助，将不胜感激 ：）

4

1 回答 1

0

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

您可以在此处阅读有关移动优先的更多信息：http: //adamkaplan.me/grid/

使用 Bourbon Neat 的示例：

    ul.navigation-list {
    display:none;
        @include media($large-screen) {
            display:block;
        }
    }
于 2015-05-25T01:17:59.497 回答