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

【问题标题】：Best practices for moving css styles into Sass files将 css 样式移动到 Sass 文件中的最佳实践
【发布时间】：2017-12-22 19:16:37
【问题描述】：

我们当前的 Angular 4 项目目前使用纯 Css，但我建议使用 SASS。我将使用 VSCode IDE 和 Live-Sass-Compiler 扩展（到目前为止运行良好），并且 webpack 用于捆绑当前的“..\src\styles.css”文件。

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

main.scss 的样子：

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

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

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

问候。

【问题讨论】：

标签： css sass

【解决方案1】：

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

您可以在没有_ this 的情况下导入您的 scss 文件。

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

这里是一些最佳实践link

【讨论】：