看不同的萨斯建筑

随着项目规模和复杂性的增加，组织SASS文件的结构化方法至关重要。 对于大型团队和项目而言，尤其如此，在该项目中遵守建立的文件和文件夹的指南至关重要。让我们检查几种流行的SASS架构技术。

钥匙要点：

>
• bootstrap-sass：最适合具有分解的复杂的混合蛋白的项目，或者需要从组件视觉样式中隐藏混音素逻辑时。 它为所有变量使用一个文件，每个组件都使用一个单独的文件。>
• Zurb Foundation：非常适合定制，特别适合中小型网站。 它通过特定于组件的变量和混合素提供了很高的灵活性，并在单个文件中提供了逻辑结构化的全局混合物。
戴尔·桑德（Dale Sande）的体系结构：
• 一种非常适合大规模项目的模块化方法。 它将所有与模块相关的逻辑保持在其自己的文件夹中，从而实现范围的扩展和样式重复使用。这通过促进为单个模块创建单独的样式表，从而提高了性能。> >
样式原型：在增加编译时间和初始文件管理的同时，此方法对中等项目是有益的。它清楚地分开了组件设计的配置，功能和介绍方面，可提高可维护性，尤其是在协作环境中。
• > bootstrap-sass：

Bootstrap的设计优先考虑快速的Web开发。 它的SASS体系结构通过将所有变量集中在单个

>文件中并保留Mixin Logic隐藏，从而反映了这一点。每个组件都位于其自己的SASS文件中。 混合素的组织唯一：从一个

文件夹中导入所有文件，每个文件都包含一个混合蛋白。 这会创建一个分层的结构（例如，在

>中使用从_variables.scss导入的Mixins中的按钮样式，然后从_mixins.scss>中导入）。 这种方法最适合具有高度复杂的混合素的项目，需要进一步分解或将逻辑与视觉样式分开时。 mixins文件夹结构：_buttons.scss _mixins.scss mixins/_buttons.scss

Zurb Foundation：

基金会的体系结构在自定义方面表现出色。 根级

<code>bootstrap/
|– bootstrap.scss   # Manifest file
|– _alerts.scss     # Component file
|– _buttons.scss    # Component file
|– _mixins.scss     # Mixin file – imports all files from mixins folder
|–  ...             # Etc..
|– mixins/
|  |–  _alerts.scss # Alert mixin
|  |– _buttons.scss # Button mixin
|  |– ...           # Etc..</code>

文件允许可变覆盖，而每个组件文件都包含其自己的组件特定变量。 函数分为

，促进框架一致性。全局混合物位于>。中

文件夹结构：

settings.scss functions.scsscomponents/_globals.scss> dale Sande的架构：

这种模块化方法是企业级项目的理想选择，在单个文件夹中组织了与模块相关的逻辑。 这允许进行范围扩展和重复使用，并简化了单独的样式表的创建以提高性能。

文件夹结构：

<code>bootstrap/
|– bootstrap.scss   # Manifest file
|– _alerts.scss     # Component file
|– _buttons.scss    # Component file
|– _mixins.scss     # Mixin file – imports all files from mixins folder
|–  ...             # Etc..
|– mixins/
|  |–  _alerts.scss # Alert mixin
|  |– _buttons.scss # Button mixin
|  |– ...           # Etc..</code>

样式原型： >这种方法虽然具有较高的初始设置成本，但为中和大型项目提供了出色的组织。 组件被分类（例如，基础，组件，布局），每个组件具有

，

，_variables.scss和一个清单文件。 这种明确的关注分离增强了协作和可维护性。_mixins.scss _extends.scss文件夹结构：

<code>foundation/
|– foundation.scss           # Manifest file
|– foundation
|  |– _functions.scss        # Library specific functions
|  |– _settings.scss         # Change variables for the entire project
|  |– components
|  |  |– _buttons.scss       # Component file (will import _globals.scss)
|  |  |– _globals.scss       # Global mixins
|  |  |– _alerts.scss        # Component file (will import _globals.scss)</code>

结论：

最佳的SASS体系结构取决于项目复杂性，编译时间注意事项和团队偏好。 请记住，更深的筑巢会增加编译时间。 选择适合您工作流程并根据需要进行调整的方法。 关键是一致性和可维护性。

以上是看不同的萨斯建筑的详细内容。更多信息请关注PHP中文网其他相关文章！