sass的嵌套语法结构_第3部分：构建我们的Sass体系结构

在前两篇文章中，我们使用NPM脚本和Parcel配置了一个项目启动器存储库。 我倾向于为每个项目采用或多或少相同的Sass架构，因此我希望我的样板包括我需要立即开始编写代码的SCSS文件和文件夹。 这是我首选的体系结构，大致基于Harry Roberts的 ITCSS （倒三角CSS）以及我以前的代理公司Mud的样板：

1. Config它通常包含三个文件：在这里，我定义了整个项目中使用的所有Sass变量，mixins和函数。 我通常将单个文件用作变量，包括断点，颜色，间距和其他任何内容。 但是没有理由不能将变量文件分成多个文件，这对于大型项目可能是个好主意。
2. 基础这里的几乎所有内容都涉及在元素选择器而不是类上编写样式。 它包括所有重设（例如* { box-sizing: border-box; } ）以及版式和表单元素的基本样式，其中某些样式稍后可能会在组件级别被覆盖。
3. 对象任何可能出现在多个组件中的可重用的小型UI都属于此处。 我从buttons.scss文件开始，因为，几乎每个项目都有按钮！ 但是我只会在需要时才添加其他人。
4. 全局变量我喜欢将要在每个页面上使用的所有组件（例如页眉和页脚）与其余组件放在单独的文件夹中。 我还在这里添加通用布局类-例如，如果我有一个要在很多地方使用的网格。 我更喜欢使用类而不是混合类，因为它的抽象水平要低一个级别。
5. 组件这用于较大的UI块，例如英雄区，卡片，媒体对象等。 在这里，我将编写大量CSS，但是我一开始就将其留空，以便可以在需要时添加单个组件文件。
6. 实用程序这是针对可以应用于任何元素的单一用途，可重用的原子（或实用程序）类。 例如，以下代码可用于在应用了此类的所有元素上设置垂直填充：

.padding-v {
	padding-top:var( --pad );
	padding-bottom:var( --pad );
}

我倾向于不使用太多这些文件，因此在需要之前我将其保留为空。

因此，为了结束我们的项目入门，我将在src / scss目录中添加以下文件结构：

01-config
	_variables.scss
	_functions.scss
	_mixins.scss
02-base
	_resets.scss
	_typography.scss
	_forms.scss
03-objects
	_buttons.scss
04-globals
	_header.scss
	_footer.scss
	_layout.scss
05-components
06-utilities

您可能会注意到每个文件夹都有一个数字前缀–这样，在文件系统中查看时，视觉顺序将反映导入顺序。 这样可以更快，更轻松地找到我想要的文件，并且可以避免任何混乱。

您可能会拥有自己喜欢的Sass架构，所以我建议您在样板中至少添加一个基本的文件夹结构–或随意对其进行调整。 即使您使用原子CSS框架（如Tailwind ），也有可能您可能需要自己编写一些CSS，因此适当的架构是有意义的。

结论

这是“现代前端工作流”迷你系列的总结。 我们已经学习了有关安装NPM软件包，编写脚本以运行任务，使用Parcel进行更轻松的自动化以及添加基本的Sass架构的知识。 该入门资料库包括我们涵盖的所有内容。 可以为您自己的项目随意克隆或添加-并将其添加。

参阅本系列的其他文章

• 使用NPM脚本构建项目启动器
• 与包裹捆绑的模块

翻译自: https://css-irl.info/a-modern-front-end-workflow-part-3/