根据所从事项目的大小，可以用两种方式构建Sass代码:一种简单的方式适用于较小的项目，另一种复杂的方式适用于较大的项目。继续往下读，看看你是怎么做到的。
Sass——CSS的延伸臂使代码变得优雅的强大因素。
使用Sass，它是关于变量、嵌套、混合、函数、部分、导入、继承和控制指令的。Sass使您的代码更易于维护和重用。
现在，我将向您展示如何使您的代码更加结构化和有组织。
当项目展开时，文件和文件夹的组织是至关重要的。随着文件结构的显著增加，对目录进行模块化是必要的。这意味着结构是有序的。这里有一个方法。
通过使用部分将样式表划分为单独的文件
将部分导入到主样式表中——主样式表通常是主样式表。sass文件。
为布局特定的文件创建一个布局文件夹
Sass结构的类型
你可以使用一些不同的结构。我喜欢使用两种结构——一个简单的和一个更复杂的。让我们来看看。
结构简单
这种简单的结构对于单个web页面这样的小项目来说很方便。为此，您需要创建一个非常小的结构。下面是一个例子:
_base。包含所有的重置，变量，混合，和工具类
_layout。所有处理布局的sass代码，也就是容器和网格系统
_components。sass——所有可重复使用的东西——按钮、导航条、卡片等等
_main。sass—主要部分应该只包含已经提到的文件的导入
同样简单结构的另一个例子如下:
_core。sass -包含变量、重置、混合和其他类似的样式
_layout。sass -有页眉、页脚、网格系统等的样式
_components。sass——项目中每个必要组件的样式，包括按钮、模态等。
_app。sass -进口
这是我通常用于小型项目的方法。当涉及到决定使用哪种结构时，项目的大小往往是决定因素。
为什么要使用这种结构?
使用这种组织结构有几个优点。首先，CSS文件会缓存，这样一来，每次访问新页面都需要下载一个新文件的需求就减少了。这样，HTTP请求也会减少。
其次，这种结构更容易维护，因为只有一个文件。
第三，CSS文件可以被压缩，从而减少它们的大小。为了获得更好的结果，建议使用Sass/Less，然后对文件进行连接和缩小。
如果文件变得杂乱无章，则需要扩展结构。在这种情况下，您可以为组件添加一个文件夹，并将其进一步分解为单独的文件。如果项目扩大，并且需要重组整个Sass结构，那么考虑下一个更复杂的模式。
7-1图案的结构
这个结构的名称来自7个文件夹，1个文件。这种结构被许多人使用，因为它被认为是大型项目的良好基础。你所需要做的就是将这些部分组织到7个不同的文件夹中，并且在根级别上应该有一个单独的文件(app.sass)来处理导入。
在抽象的partial中，有一个包含所有变量、mixin和类似组件的文件。
核心部分包含排版、重置和样板代码等文件，在整个网站中使用。一旦编写了这段代码，就不再有进一步的覆盖。
Components partial包含了要为一个网站创建的所有组件的样式，包括按钮、旋转木马、选项卡、模态等等。
布局部分包含网站布局所需的所有样式，如页眉、页脚。
页面部分包含每个单独页面的样式。几乎每个页面都需要特定的样式，这些样式只能用于特定的页面。
为了使每个section都可重用，sass代码易于访问，有section /块的部分。同样，拥有这个部分也很重要，这样您就不需要搜索特定的代码是否在home中。sass约。页面部分中的sass文件。
将每个部分放在单独的.sass文件中是一个好主意。因此，如果你有两个不同的英雄节，把代码放到同一个文件中，你就可以在那里找到这两个节的代码。如果你遵循这个模式，你会在这个文件夹里有大部分的文件。
供应商部分是为引导框架设计的，因此，如果您在项目中使用一个框架，请创建这个部分。
与其在文件中有大量导入，不如创建一个all。每个文件夹中都有sass文件。每一个。sass文件应该包含该文件夹的所有导入——为了使其更加可见和可理解，创建一个主文件。
组织
这种结构的最大好处是组织。如果你需要改变某些特定的东西，你总是知道去哪里检查。例如，如果你想改变一个区段/块的间距，你直接去区段/块文件夹。这样，您就不需要在文件夹中查找文件中的类。
便利化
当代码被结构化时，流程就会迅速地得到简化。它们是流线型的，每个代码片段都有自己的位置。
最后的话
组织代码对于开发人员来说是必不可少的，它和其他所有技能一起，是改进站点功能的最有效的方法。即使有多种组织方式和不同的策略，选择简单可以帮助你避免危险的陷阱。最后，没有正确或错误的选择，因为一切都取决于开发者的工作策略。
