现代 Sass 文件夹结构

Sass 模板 v2.0 现已发布。欢迎查看我最近制作的文章和视频：

你好呀！

今天，我们将讨论如何利用 Sass 的强大功能来组织您的 CSS。

我希望你对 Sass 是什么以及它是如何工作的有所了解。因为本主题的重点是如何提高你使用 Sass 的效率。你可能想知道为什么我把 SCSS 称为 Sass，而不是 SCSS。是的，它们之间确实存在一些区别，但是大多数开发人员也使用这个术语。听了一段时间后，我养成了称之为 Sass 的习惯。也许是因为发音更容易。:) 如果你想了解更多关于它们之间区别的信息，请查看以下资源：

• 关于“Sass”的 Sass 指南
• Kevin Powell 谈“sass 还是 scss”

首先，我要特别感谢Sass 指南网站和Kevin Powell，是他们让我了解了这些概念。我只是把所有这些概念结合起来，并根据自己的喜好做了一些修改。现在，我想分享一下现代 Sass 模板文件夹的结构。你可以 fork 这个GitHub 仓库并将其用作模板。好了，说了这么多，让我们开始吧。

有一个著名的7-1 模式文件夹结构。如果你不知道它是什么，可以前往Sass 指南了解更多信息。基本上，它有 7 个不同的文件夹，其中包含文件或所谓的“部分”，然后将它们全部导入到一个主 Sass 文件中，并编译成一个大的 CSS 文件。

• abstracts/
• base/
• utilities/
• components/
• layout/
• pages/
• themes/
• vendors/
• style.scss

然而，Sass 指南中给出的文件夹结构示例使用了@import方法，该方法现已弃用。现在，我们有了@use和，它们是在 Sass 中导入文件和文件夹的现代方法。在观看了 Kevin Powell 关于这两种方法的 YouTube 视频后，我对它们有了更清晰的理解。您可以点击此处@forward了解更多信息。

文件夹结构

sass/
|
|- abstracts/
|    |- _variables.scss
|    |- _media-query.scss
|    |- _colors.scss
|    ...
|    |- _index.scss
|
|- base/
|    |- _base.scss
|    |- _reset.scss
|    ...
|    |- _index.scss
|
|- utilities/
|    |- _main.scss
|    |- _container.scss
|    |- _exceptions.scss
|    ...
|    |- _index.scss
|
|- components/
|    |- _buttons.scss
|    |- _carousel.scss
|    |- _dropdown.scss
|    ...
|    |- _index.scss
|
|- layout/
|    |- _header.scss
|    |- _sidebar.scss
|    |- _footer.scss
|    ...
|    |- _index.scss
|
|- pages/
|    |- _about.scss
|    |- _contact.scss
|    ...
|    |- _index.scss
|
|- themes/
|    |- _theme.scss
|    |- _admin.scss
|    ...
|    |- _index.scss
|
|- vendors/
|    |- _bootstrap.scss
|    |- _modern-reset.scss
|    ...
|    |- _index.scss
|
|- style.scss

您可能已经注意到，每个文件夹中都有一个名为 的文件_index.scss。它之所以存在，是因为您不再需要逐个导入文件夹中的每个文件。_index.scss文件中应该只有@forward一个 s ，它的作用是将您的文件作为文件夹“转发”到其他不同的文件。

例如，在我们的例子中，abstracts/文件夹中除了一个文件外，还有 3 个不同的文件_index.scss。在_index.scss文件中，我们可以“转发”该文件夹内的每个文件：

_index.scss

@forward 'variables';
@forward 'media-query';
@forward 'colors';

如果您想使用abstracts/文件夹中的所有文件，您可以像这样“使用”它们：

style.scss

@use 'abstracts';

但是，如果我们使用@import方法导入文件，我们就不需要_index.scss文件，它看起来会像这样：

style.scss

@import 'abstracts/variables';
@import 'abstracts/media-query';
@import 'abstracts/colors';

@import 'base/reset';
@import 'base/base';

...

现在，我们可以“转发”_index.scss文件夹中所有包含 file 的文件，并style.scss使用@use方法将其导入到主文件中。结果应该如下所示：

style.scss

@use 'abstracts';
@use 'vendors';
@use 'base';
@use 'utilities';
@use 'components';
@use 'pages';
@use 'themes';

假设你在_mixins.scss文件中创建了一些 mixin。并且你想在_buttons.scss文件中使用它来为按钮添加一些样式。你可以这样做：

_buttons.scss

@use "../abstracts" as *;

_mixins.scss文件放在文件夹中的原因abstracts/是 mixin 不会被编译成 CSS。就像函数、映射和 Sass 变量一样。所有这些可重用的文件都应该放在abstracts/文件夹中，这样你就可以通过导入它们轻松地在文件中使用这些 mixin、映射和变量。

你可能想知道这是什么*意思。如果你了解 Python 或 React，你可能经常看到这种情况。如果你不了解，这基本上意味着你可以在当前文件中自由使用所有可复用的文件。我的意思是，如果你使用了a而不是，那么无论你使用了属于该文件夹的代码，*你都需要使用for 。a.something

另外，请注意也/path应该与该文件相关。

如果您仍然难以理解某些概念，我再次强烈建议您查看这两个资源：

• Sass 指南网站
• 凯文·鲍威尔

一旦你学会了这些方法，它很快就会成为你习惯的一部分。我几乎所有的项目都用这个模板。

总而言之，我祝您旅途愉快！

感谢阅读！