@media 指令在 SASS 中的作用是什么？

SASS代表语法上很棒的样式表。它基本上是一个 CSS 预处理器，可以帮助我们减少 CSS 代码中的重复，也有助于降低 CSS 代码的复杂性。 SASS 使用不同的特性（如 mixins、变量等）使代码易于理解。 SASS 的一个重要特性是@media指令，它在普通 CSS 中完成媒体查询的工作。在本文中，我们将学习如何在 SASS 中使用 @media 指令并且它正在工作。

为了创建响应式网站，我们为不同的屏幕宽度和高度定义了不同的 CSS 样式。这可以使用 CSS 中的媒体查询来完成，但是，代码变得非常大，我们必须多次重复代码。 SASS 使用@media指令降低了这种复杂性。该指令允许元素适应不同的屏幕宽度。

句法：

.element {
    @media screen and (...) {

    }
}

从上面的语法可以看出，与 CSS 不同，@media 指令可以在选择器内部定义，这使得代码更短，更容易理解。

示例：在下面的示例中，我们使用 SASS @media 指令根据屏幕宽度的变化更改了背景颜色和字体大小。我们将文件与使用 sass 命令生成的“style.css”链接。

HTML

  

    

  

    
@media directive in SASS

  

SASS

body {
    background-color: rgb(95, 95, 207);
    font-size: 5rem;
    
    @media screen and (max-width : 800px) {
        background-color: rgb(150, 150, 235);
        font-size: 4rem;
    }
    
    @media screen and (max-width: 500px) {
        background-color: rgb(58, 58, 247);
        font-size: 3rem;
    }
}

输出：