scss如何处理@screen

Question

我目前的处理方法是，写一个mix-in

@mixin screen_handle{
  @media screen and (max-width: 1200px) and (min-height: 900px) {
    @content
  }
}

然后这样用

#container{
    width: 20rem;
    @include screen_handle{
        width: 95%
    }
    >input{
        padding: 1rem;
        @include screen_handle{
            padding: 2rem 1rem;
        }
    }
}
    /*
     实际情况下#container和input之间有很多元素，所以不考虑以下方法
         @include screen_handle{
            width: 95%;
            >input{
               padding: 2rem 1rem;
            }
         }
    */

这就造成生成的csc是这样的

#container {
    width: 20rem; 
}
@media screen and (max-width: 1200px) and (min-height: 900px) {
    #container {
        width: 95%; 
    } 
}
#container > input {
    padding: 1rem; 
}
@media screen and (max-width: 1200px) and (min-height: 900px) {
    #container > input {
        padding: 2rem 1rem;
    } 
}

有两个相同的@screen显然不合理，请问该如何解决？

Answer 1

目前github的issue提到了这个问题，有人提出了比较好的解决方案，但是作者还没有更新。等更新吧