构建您的 SASS 项目
让我们来看看如何构建我们的 Sass 项目！
随着项目规模的扩大和增长，模块化目录和文件结构的需求也急剧增加。因此，保持文件和文件夹的井然有序至关重要。此外，我们还能创建可在多个项目中重复使用的组件。并没有所谓的“正确”结构——一切都取决于你！
我们如何构建 Sass 项目？
我们使用Partials将样式表拆分成多个单独的文件来实现这一点。这些单独的文件代表不同的组件。然后，我们使用指令将这些 Partials导入@import到一个主样式表（通常是 .jsmain.scss文件）中。例如：
// File: main.scss
@import 'layout/header';
然后我们可以创建一个布局文件夹来存放布局相关的特定文件，例如：
// File: _header.scss
// This file contains all styles related to the header of the site/application.
/* STYLES GO HERE */
记住：部分文件的名称应该始终以下划线开头_。
接下来，让我们来看看我们可以选择哪些方式来构建我们的项目！
请记住，没有唯一正确的结构——完全取决于你！
让我们来看看如何构建你的项目。
简单结构
如果你在小型项目中使用 Sass，例如一个单独的网页，那么一个非常简单的结构可能如下所示：
_base.scss
_layout.scss
_components.scss
main.scss
这里我们有 3 个部分连接到我们的main.scss。
基础文件：此文件中包含您的所有重置、变量、混合和任何实用类。
布局：包含所有处理布局的 CSS，例如容器和任何网格系统。
组件：任何可重用的东西，例如按钮、导航栏、卡片等。
主目录：它应该只包含上述文件的导入语句。
如果任何文件变得过于杂乱无章，就该扩展我们的结构了。例如，可以考虑为组件添加一个文件夹，并将其拆分为单独的文件，例如_button.scss& _carousel.scss。
但是，当我们处理更大的项目时，我们需要更严谨的架构，我们将在下一节中探讨这一点。
7-1模式
被称为“7-1模式” （7个文件夹，1个文件）的架构是一种被广泛采用的结构，是大型项目的基础。在这种架构中，所有局部模板都组织在7个不同的文件夹中，而根目录下只有一个文件（通常命名为`.css` main.scss）用于处理导入——也就是最终编译成CSS的文件。
这是一个 7-1 目录结构的示例，我在每个文件夹中都包含了一些文件示例：
sass/
|
|– abstracts/ (or utilities/)
| |– _variables.scss // Sass Variables
| |– _functions.scss // Sass Functions
| |– _mixins.scss // Sass Mixins
|
|– base/
| |– _reset.scss // Reset/normalize
| |– _typography.scss // Typography rules
|
|– components/ (or modules/)
| |– _buttons.scss // Buttons
| |– _carousel.scss // Carousel
| |– _slider.scss // Slider
|
|– layout/
| |– _navigation.scss // Navigation
| |– _grid.scss // Grid system
| |– _header.scss // Header
| |– _footer.scss // Footer
| |– _sidebar.scss // Sidebar
| |– _forms.scss // Forms
|
|– pages/
| |– _home.scss // Home specific styles
| |– _about.scss // About specific styles
| |– _contact.scss // Contact specific styles
|
|– themes/
| |– _theme.scss // Default theme
| |– _admin.scss // Admin theme
|
|– vendors/
| |– _bootstrap.scss // Bootstrap
| |– _jquery-ui.scss // jQuery UI
|
`– main.scss // Main Sass file
抽象类（或实用工具类）：包含 Sass 工具、辅助文件、变量、函数、mixin 和其他配置文件。这些文件仅用于辅助功能，编译后不会输出任何 CSS 代码。
基础文件：包含项目的样板代码，包括项目中常用的标准样式，例如重置样式和排版规则。
组件（或模块）：包含按钮、轮播图、滑块和类似页面组件（类似于小部件）的所有样式。您的项目通常会包含大量组件文件——因为整个网站/应用程序应该主要由小型模块组成。
布局：包含与项目布局相关的所有样式，例如页眉、页脚、导航和网格系统的样式。
页面：任何特定于各个页面的样式都将放在这里。例如，网站首页通常需要一些其他页面不需要的特定样式。
主题：这部分内容可能很少在项目中用到。它用于存放创建项目特定主题的文件。例如，如果网站的不同部分包含不同的配色方案。
供应商：包含所有来自外部库和框架的第三方代码，例如 Normalize、Bootstrap、jQueryUI 等。然而，通常需要覆盖供应商代码。如果需要这样做，最佳实践是创建一个名为 `Vendors` 的新文件夹vendors-extensions/，然后将所有被覆盖的供应商文件命名为相应的供应商名称。该文件vendors-extensions/_bootstrap.scss将包含所有 Bootstrap 覆盖代码——因为直接编辑供应商文件通常不是一个好主意。
Main.scss：此文件应仅包含导入语句！例如……
@import 'abstracts/variables';
@import 'abstracts/functions';
@import 'abstracts/mixins';
@import 'vendors/bootstrap';
@import 'vendors/jquery-ui';
@import 'base/reset';
@import 'base/typography';
@import 'layout/navigation';
@import 'layout/grid';
@import 'layout/header';
@import 'layout/footer';
@import 'layout/sidebar';
@import 'layout/forms';
@import 'components/buttons';
@import 'components/carousel';
@import 'components/slider';
@import 'pages/home';
@import 'pages/about';
@import 'pages/contact';
@import 'themes/theme';
@import 'themes/admin';
注意：导入时无需包含_.txt文件扩展名。.scss
7-1 助您快速启动：
官方样板代码已上传至GitHub。您可以使用以下终端命令下载或克隆它：
git clone https://github.com/HugoGiraudel/sass-boilerplate.git
总结
好了！你已经学会了如何构建 Sass 项目。记住，这里没有硬性规定。你应该以对你（和你的团队！）有意义的方式构建项目。能够帮助你快速轻松地找到并隔离样式的方法——才是最佳选择！
你准备好将你的开发技能转化为自由职业事业了吗？无论你是自由职业新手，还是想要提升现有技能，我都会教你成为一名成功自由职业者所需的一切知识！
立即开始使用我的《自由职业完全指南》吧！
简单介绍一下我自己……
嘿，我是蒂姆！👋 我是一名自由职业者，同时也是企业主、网页开发人员和作家。
我教授新手和经验丰富的自由职业者如何建立可持续发展的成功自由职业事业。如果您想阅读更多我的文章，请访问我的博客。
感谢阅读🎉
文章来源：https://dev.to/timothyrobards/structuring-your-sass-projects-50cm