Question

我知道我可以将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，它就不再起作用了。

Answer 1

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

@import规则在SCSS和CSS中的工作方式有所不同。

除@import语句外，所有CSS都是有效的SCSS ...

在SCSS中，import语句仅需要文件的路径和文件名。如果要导入文件是为了将它们组合到一个CSS文件中，则需要使用下划线命名这些文件。

如果您具有类似这种结构的内容，则其中的断点文件称为“ _breakpoint.scss”：

/root/scss/main.scss

/root/scss/modules/_breakpoint.scss

然后，您需要以这种方式编写导入语句：

@import "modules/breakpoint";

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

styles.css

blue.css

red.css

index.html

1 个答案: