在sass中嵌套断点媒介查询

admin 前端 2019年2月24日 17:56 查看697次

我喜欢在Sass或Less中嵌套 @media 查询断点。这是最喜欢用的一种方法:

.element {
  display: grid;
  grid-template-columns: 100px 1fr;
  @include breakpoint(baby-bear) {
    display: block;
  }
} 

 

这种方法简单易用,如果子元素也要设置断点的话,可以这样:

.parent {

    @include breakpoint(desktop) {
    }

    .child {
        @include breakpoint(desktop) {
        }
    }

   .child-2 {
        @include breakpoint(desktop) {
        }
    }

}

 

编译后变成如下:

@media screen and (min-width: 700px) {
  .parent {
  }
}
@media screen and (min-width: 700px) {
  .parent .child {
  }
}
@media screen and (min-width: 700px) {
  .parent .child-2 {
  }
}

或者:

.parent {

    @include breakpoint(desktop) {

       .child {
       }

       .child-2 {
       } 

    }

    .child {
    }

   .child-2 {
    }

}

编译结果:

@media screen and (min-width: 700px) {
  .parent .child {
  }
  .parent .child-2 {
  }
}
.parent .child {
}
.parent .child-2 {
}

 

不过这种子父嵌套也是sass和less的优点,效率非常高,如果按普通的css去写,需要不停的复制父缓元素。