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

Question

最近我访问了一个网站，该网站为其LESS文件使用不同的文件;它使用一个文件作为变量，另一个文件用于mixin等等，最后，它将这些文件一起使用。例如，它使用mixin文件中变量文件中的变量。

除了scss文件，我怎么能做同样的事情？

Answer 1

使用@import directive包含单独的文件。

  

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

Answer 2

您可以构建这样的构造：

<强> _variables.scss：

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

<强> _utils.scss

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

<强> app.scss

@import "variables";
@import "utils"

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

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