Sass中的媒体查询

我想知道是否有一种方法可以在 sass 中编写媒体查询,所以我可以给出一定的风格:300px 到 900px

我想知道是否有一种方法可以在 sass 中编写媒体查询,所以我可以给出一定的风格:300px 到 900px

在 css 中它看起来像这样

@media only screen and (min-width: 300px) and (max-width: 900px){
}

我知道我可以写

@media (max-width: 900px)

在 SASS,但如何使这一范围?

118
$small: 300px;
$medium: 900px;
.smth {
  //some CSS
  @media screen and (max-width: $small) {
    //do Smth
  }
  @media screen and (min-width: $medium) {
    //do Smth
  }
}

像这样吗?

22

这是我使用 sass 的 Mixin,它允许我快速引用我想要的断点。显然,您可以调整媒体查询列表以支持您的项目移动拳头等。

但它会为您提供多个查询,因为我相信您正在要求。

$size__site_content_width: 1024px;
/* Media Queries */ Not necessarily correct, edit these at will 
$media_queries : (
    'mobile'    : "only screen and (max-width: 667px)",
    'tablet'    : "only screen and (min-width: 668px) and (max-width: $size__site_content_width)",
    'desktop'   : "only screen and (min-width: ($size__site_content_width + 1))",
    'retina2'   : "only screen and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi)",
    'retina3'   : "only screen and (-webkit-min-device-pixel-ratio: 3) and (min-resolution: 288dpi)",
    'landscape' : "screen and (orientation:landscape) ",    
    'portrait'  : "screen and (orientation:portrait) "
);
@mixin for_breakpoint($breakpoints) {
    $conditions : ();
    @each $breakpoint in $breakpoints {
        // If the key exists in the map
        $conditions: append(
            $conditions,
            #{inspect(map-get($media_queries, $breakpoint))},
            comma
        );
    }
    @media #{$conditions} {
        @content;
    }
}

在你的 scss 中使用它:

#masthead {
    background: white;
    border-bottom:1px solid #eee;
    height: 90px;
    padding: 0 20px;
    @include for_breakpoint(mobile desktop) {
        height:70px;
        position:fixed;
        width:100%;
        top:0;
    }
}

然后这将编译为:

#masthead { 
  background: white;
  border-bottom: 1px solid #eee;
  height: 90px;
  padding: 0 20px;
}
@media only screen and (max-width: 667px), only screen and (min-width: 1025px) {
  #masthead {
    height: 70px;
    position: fixed;
    width: 100%;
    top: 0;
  }
}
10

检查 scss。https://github.com/Necromancerx/media-queries-scss-mixins

Usage
.container {
    @include xs {
        background: blue;
    }
    @include gt-md {
        color: green
    }
}
Demo:Stackblitz Based onAngular FlexLayout MediaQueries
4
$small: 300px;
$medium: 900px;
@media screen and (min-width: $small) and (max-width: $medium) {
    //css code
}

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(418)
从Google工作表中的网站刮取图像(使用 ImportXml)
上一篇
"远程计算机是 AAD" 但"登录尝试失败"
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(76条)