将css样式移动到Sass文件的最佳实践

Question

我们目前的Angular 4项目目前使用纯Css，但我建议使用SASS。我将使用VSCode IDE和Live-Sass-Compiler扩展（到目前为止工作得很好），webpack用于捆绑当前的＆＃34; .. \ src \ styles.css＆＃34;文件。

我已经将styles.css中的大约800多行移动到_base.scss中（原样），我创建的新sass文件夹结构是：

• 的src

  • SASS

    _base.scss

    _variables.scss

    main.scss

main.scss的位置如下：

@import "_variables.scss";
@import "_base.scss";

我的主要问题是双文件夹：将所有这些样式重构为新的main.scss文件的最佳做法是什么？我应该在_varialbes.scss中创建新的sass变量并在_base.scss中使用它们吗？

如果我的问题太宽泛，我会尝试缩小范围。

问候。

Answer 1

如果_base.scss，您可以在"@import _variables.scss";上使用新变量。 导入_ scss files时，您不需要使用_，只是意味着部分。

您可以导入scss文件而不需要_。

@import "variables.scss";
@import "base.scss";

以下是一些最佳做法link