快点开始SASS：SASS中的建筑

> SASS架构：深入研究模块化CSS开发

此摘录来自>跳跃启动SASS探索CSS体系结构的复杂性以及SASS如何增强过程。 我们将研究各种建筑方法和最佳实践，以构建可扩展和可维护的样式表。

从历史上看，CSS体系结构一直是一个挑战。 SASS通过变量，混合素和其他功能来解决此问题，但最佳方法仍然是讨论点。 流行的方法包括OOCS，SMACS，原子设计，ITCSS和BEM，每个设计都具有优势和劣势。 最好的策略通常是混合动力，将来自多个系统的元素结合在一起。

密钥概念：

sass的增强

：
• 与CSS的不同，SASS的版本在编译过程中结合了多个文件，减少了HTTP请求。 带有部分的模块化体系结构@import：@import将CSS分解为逻辑单元（部分由下划线前缀表示，例如
>）。然后将这些导入到主文件中以进行编译。
• > css架构方法：_buttons.scss探索OOCSS，SMACSS，原子设计，ITCSS和BEM，以了解其原理并将其适应您的项目。
>>>>>>>>>>
• > sass特征：利用变量，混合素和功能，以保持一致性，可读性和可维护性。
• >未来的注意事项：
• >有组织的文件结构：将样式分类为>和>。
• 多个文件和文件夹：> base将代码分为多个文件是预处理器的核心好处。 SASS允许颗粒组织。 components规则在编译过程中将这些文件合并到浏览器的单个CSS文件中。utilities

CSS与SASS Imports：

> > css 使用浏览器侧处理，产生额外的HTTP请求。 SASS

处理汇编，导致单个输出文件。 SASS返回到

>文件，@import>或

url的标准CSS导入和

> functions。 > sass进口和部分：

> @import> sass Imports（@import或.css文件）被编译到主文件中。 partials（以http://>开头的文件名）不是独立编译的，而是将其导入到其他文件中。 为简单起见，可以在导入中省略扩展。https:// url()

示例SASS目录结构：

<code>sass/
├── config/
│   ├── _colors.scss
│   └── _webfonts.scss
├── layout/
│   ├── _navigation.scss
│   └── _banner.scss
├── modules/
│   ├── _calendar.scss
│   └── _contact.scss
└── main.scss</code>

>组件和组织：

>根据特异性（首先全局默认值，然后将站点范围的模式，组件和覆盖）组织到文件夹中。 以相同的顺序将它们导入主文件（

）。main.scss>

> oocss（面向对象的CSS）：

>强调在各种情况下可重复使用的颗粒状设计模式。 关键原理：单独的结构和皮肤，以及单独的容器和内容。

>

原子设计：

将CSS组织成原子，分子，生物，模板和页面。 提供了一种结构化的方法来建筑组件。

> bem（block，element，modifier）：

> >使用命名惯例（）来创建可重复使用的独立块。 提供了一个全面的系统，包括CSS，HTML和JavaScript。

> smacss（CSS的可扩展和模块化体系结构）：block__element--modifier

>

>将CSS分为基础，布局，模块，状态和主题。 专注于适用性的深度，并保持小型和独立的组件。>

> itcss（倒三角css）：

>基于覆盖率，特异性和显性性组织CSS，可视化为倒三角形。 层包括设置，工具，通用，元素，对象，组件和特朗普。 > Miriam的Mix-n-Match：

>一种灵活的方法，结合了来自各种系统的元素，优先考虑CSS级联和使用“ SASS Central神经系统”来进行配置和可重复使用的工具。> SASS 4：

这个即将到来的功能增强了控制和命名空间管理，解决了全局名称空间冲突。 >允许导入模块的特定部分并将其命名。 促进模块之间的API。

@use结论： @forward

选择正确的SASS架构取决于项目需求和团队偏好。 结合各种系统的最佳实践的混合方法通常是最有效的解决方案。 SASS 4的模块化进口有望进一步改善模块化和可维护性。

>

以上是快点开始SASS：SASS中的建筑的详细内容。更多信息请关注PHP中文网其他相关文章！