在一个项目的不同文件中使用SCSS代码

最近我访问了一个网站，该网站使用不同的文件来处理其较少的文件；它将一个文件用于变量，另一个文件用于mixin等等，最后，它将这些文件一起使用。例如，它在mixin文件中使用变量文件中的变量

除了scss文件外，我如何才能执行相同的操作？

使用来包含单独的文件

Sass扩展了CSS@import规则，允许它导入SCSS和Sass文件。所有导入的SCSS和Sass文件将合并到一个CSS输出文件中。此外，在导入的文件中定义的任何变量或mixin都可以在主文件中使用

---

您可以构建如下构造：

_variables.scss：

_utils.scss

app.scss

---

但这只是一种方法，这取决于项目的需要。

不应该这样。这就是sass的基本功能……请注意，CSS要求导入语句位于文档的开头，而Less和sass则不要求。

$color: blue;
$text: "woohooo";

@mixin awesome-stuff
{
  /*magic*/
}

@import "variables";
@import "utils"

p
{
  color: $color;
  @include awesome-stuff;
}