如何使用 Scss 导入媒体查询？答案

【问题标题】：How to import Media Queries with Scss?如何使用 Scss 导入媒体查询？
【发布时间】：2020-09-08 15:00:17
【问题描述】：

我知道我可以将 css 模块导入到我的主 css 文件中，条件是它满足媒体查询要求，在 @import 规则中键入条件。但是当我尝试使用 scss 文件而不是 css 来做同样的事情时，它什么也没做。如何像在 CSS 中一样在 Scss 中使用媒体查询？

这就是我在 css 中的代码的样子：

styles.css

@import 'blue.css' (min-height: 300px);
@import 'red.css' (min-height: 400px);

blue.css

.square{
  background:blue;
  width: 200px;
  height: 200px;
}

red.css

.square{
  width: 200px;
  height: 200px;
  background:red;
}

index.html

<html lang="en">
<head>
  <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=">
  <link href="styles.css" rel="stylesheet">
  <title></title>
</head>
<body>
  <div class="square"></div>
</body>
</html>

但是一旦我将格式从 css 更改为 scss，它就不再起作用了。

【问题讨论】：

标签： javascript css sass

【解决方案1】：

TLDR：无法在 SCSS 中执行媒体查询导入。

@import 规则在 SCSS 和 CSS 中的作用不同。

所有 CSS 都是有效的 SCSS...除了 @import 语句。

在 SCSS 中，import 语句只需要文件的路径和文件名。如果您导入文件是为了将它们合并到一个 CSS 文件中，则需要以下划线开头来命名这些文件。

如果你有类似这种结构的东西，其中断点文件叫做“_breakpoint.scss”：

/root/scss/main.scss

/root/scss/modules/_breakpoint.scss

那么你需要这样写你的导入语句：

@import "modules/breakpoint";

【讨论】：