如何在 CSS3 媒体查询中使用 Sass 变量？

SASS 变量： SASS 变量非常易于理解和使用。 SASS 变量为以 $ 符号开头的名称赋值，然后只引用该名称而不是值。尽管如此，它们还是 SASS 提供的最有用的工具之一。
SASS 变量提供以下功能：

• 减少重复
• 做复杂的数学
• 配置库
• 以及更多 …

CSS 媒体查询： CSS 媒体查询是 CSS3 的特性，它允许指定何时必须应用给定的 CSS 规则。媒体查询的工作牢记设备的功能。它们可用于检查许多事情，例如：

• 视口的宽度和高度
• 设备的宽度和高度
• 方向(横向或纵向)
• 设备分辨率

在 CSS3 媒体查询中使用 SASS 变量并不容易实现。只有当 SASS 将查询的所有属性抓取到包含 SASS 变量的样式表中，然后相应地更改它们时，才有可能。
它可以通过两种方式完成：

• 使用 Post-CSS 变量
• 使用混入

使用 Post-CSS 变量：以下示例适用于 SASS(即使对于较旧的浏览器)。

$width1: 1280px;
$width2: 1720px;
 
:root {
    f-size: 20px;
    f-family: Helvetica, sans-serif;
}
 
@media (min-width: $width1) and (max-width: $width2) {
    :root {
        f-size: 22px;
        f-family: Helvetica;
        ;
    }
}
 
@media (min-width: $mq-hhd) {
    :root {
        f-size: 24px;
        f-family: sans-serif;
        ;
    }
}
 
.my-element {
    font-size: var(f-size);
    color: red;
    font-family: var(f-family);
}

该代码将产生以下编写的CSS 输出。重复的媒体查询显然会增加文件的大小，但发现一旦网络服务器应用压缩(它通常会自行完成)，这种增加通常可以忽略不计。

.my-element {
        font-size: 20px;
        font-family: Helvetica, sans-serif;
    }

    @media (min-width: 1280px) and (max-width: 1719px) {
        .my-element {
            font-family: Helvetica;
        }
    }

    @media (min-width: 1720px) {
        .my-element {
            font-family: sans-serif;
        }
    }

    @media (min-width: 1280px) and (max-width: 1719px) {
        .my-element {
            font-size: 22px;
        }
    }

    @media (min-width: 1720px) {
        .my-element {
            font-size: 24px;
        }
    }

使用 mixins：如果需要，它可以让您将所有内容都放在一个文件中。

@mixin change($width) {
 
    // your SCSS here
    #Contents {
        width: $width;
    }
}
 
@media screen and (max-width: 140px) {
    @include change($width: 720px);
}
 
@media screen and (min-width: 1441px) {
    @include change($width: 960px);
}

此代码将显示以下结果。

@media screen and (max-width: 140px) {
        #Contents {
            width: 720px;
        }
    }

    @media screen and (min-width: 1441px) {
        #Contents {
            width: 960px;
        }
    }