Sass 中的媒体查询

Posted 2023-02-19

【中文标题】Sass 中的媒体查询

【英文标题】：Media queries in Sass

【发布时间】：2016-08-25 18:28:38

【问题描述】：

我想知道是否有办法在 sass 中编写媒体查询，所以我可以在 300px 到 900px 之间给出某种样式

在css中是这样的

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

我知道我会写

@media (max-width: 900px)

在 sass 中，但如何设置该范围？

【问题讨论】：

为什么这是一个问题？语法完全相同。

【参考方案1】：

@media 规则可以完成以上所有以及更多。除了允许插值之外，它还允许在特征查询中直接使用 SassScript 表达式。

如果可能，Sass 还将合并相互嵌套的媒体查询，以便更轻松地支持尚未原生支持嵌套 @media 规则的浏览器。

$layout-breakpoint-small: 960px;
.smth 
  display: none;
  @media (min-width: $layout-breakpoint-small) 
    display: block;
  

<div class="smth"></div>

【参考方案2】：

$small: 300px;
$medium: 900px;

.smth 
  //some CSS
  @media screen and (max-width: $small) 
    //do Smth
  
  @media screen and (min-width: $medium) 
    //do Smth
  

这样的？

【讨论】：

这让我很困惑。现在我们有了第一个适用于所有宽度的 s.mth，除了大于 $small 的那些会得到其他代码，除非大于 $medium 然后他们得到第三个代码。我不确定为什么一个媒体行规则不能使用变量。

【参考方案3】：

$small: 300px;
$medium: 900px;

@media screen and (min-width: $small) and (max-width: $medium) 
  //css code

【参考方案4】：

看看这个scss。 https://github.com/Necromancerx/media-queries-scss-mixins

用法

    .container 
      @include xs 
        background: blue;
      

      @include gt-md 
        color: green
      
    

演示：Stackblitz

基于Angular FlexLayout MediaQueries

【参考方案5】：

这是我使用 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;
  

【讨论】：

根据我的测试mobile 和其他键应该将它们的值封装在unquote("$string") 中，例如； unquote("only screen and (max-width: 667px)")，因为 @media 查询不接受引号...或删除引号，因为这似乎没有弹出构建错误。此外，在定义 key:value pares 时，我无法让 sass 数学工作，因此分配 $_content_width_plus_one: $size__site_content_width + 1; 并将其用于 desktop min-width 值可能更有效。除了这两点之外，这个答案很漂亮。

按照 S0AndS0 的建议，这对我有用：$size__site_content_width: 1024px; $size__site_content_width_plus_one: 1025px; $media_queries: ( 'mobile': unquote("only screen and (max-width: 667px)"), 'tablet': unquote("only screen and (min-width: 668px) and (max-width: $size__site_content_width)"), 'desktop': unquote("only screen and min-width: $size__size_content_width_plus_one)" ) 为了方便我还添加了这个：@mixin mobile @include for_breakpoint(mobile) @content; 那么我就这样做：@include mobile padding: 1rem;