css - SASS 媒体查询最佳实践？

Question

可以在元素中嵌套媒体查询吗？如果我想使用 min-width: 480px在其他地方会有巨大的重复。请看我的代码示例。还是只是使用旧的方式？任何的想法？

SASS

.navbar {
     height: 500px;
     width: 500px;

     @media screen and (min-width: 480px) {
         background-color: lightgreen;
     }
}

.items {
    padding: 15px;
    color: red;

    @media screen and (min-width: 480px) {
        border: 1px solid black;
    }
}

CSS

@media screen and (min-width: 480px) {
   .navbar {
       background-color: lightgreen;
   }

   .items {
       border: 1px solid black;
   }
}

Answer 1

$pc: 1024px;    // PC screen size.
$tablet: 720px; // Tablet screen size.
$phone: 320px;  // Phone screen size.

@mixin responsive($media) {
  @if $media= phone {
    @media only screen and (max-width: $tablet - 1) {
      @content;
    }
  }
  @else if $media= tablet {
    @media only screen and (min-width: $tablet - 1) and (max-width: $pc) {
      @content;
    }
  }
  @else if $media= pc {
    @media only screen and (min-width: $pc + 1) and (min-width: $pc) {
      @content;
    }
  }
  @else if $media= pc_tablet {
    @media only screen and (min-width: $tablet - 1) {
      @content;
    }
  }
}

例子

body {
  @include responsive(pc) {
    background: red;
  }
  @include responsive(tablet) {
    background: yellow;
  }
  @include responsive(phone) {
    background: green;
  }
}