2结构的最聪明的方法

米兰萨沃夫 经过 米兰萨沃夫  |  12月11日,2020年12月11日

根据您正在处理的项目的大小,您可以通过两种方式构建SASS代码:对于较小的项目,一个简单的项目,更复杂为更大的项目。阅读,了解如何。

Sass - CSS的延伸臂;为您的代码带来优雅的功率因数。

使用Sass,它是关于变量,嵌套,MixIn,功能,部分,导入,继承和控制指令。 SASS使您的代码更可维护和可重复使用。

现在,我会向您展示如何使您的代码更具结构化和组织。

当项目展开时,文件和文件夹的组织至关重要。模块化目录是必要的,因为文件结构显着增加。这意味着构造是有序的。这是一种方法。

  • 使用Partials将样式表划分为单独的文件
  • 将部分导入主样式表 - 通常是main.sass文件。
  • 为布局特定文件创建一个布局文件夹

 

SASS结构的类型

您可以使用一些不同的结构。我更喜欢使用两个结构 - 一个简单的结构和一个更复杂的结构。我们来看一下。

结构简单

简单的结构对于单个网页等小项目方便。为此,您需要创建一个非常最小的结构。这是一个例子:

  • _base.sass. - 包含所有重置,变量,mixins和实用类
  • _layout.sass. - 处理布局的所有SASS代码,这是容器和网格系统
  • _components.sass.sass. - 所有可重复使用的所有内容 - 按钮,纳米栏,卡等
  • _main.sass. - 主要部分应仅包含已提到的文件的导入

相同简单结构的另一个例子如下:

  • _core.sass. - 包含变量,重置,Mixins和其他类似风格
  • _layout.sass. - 标题,页脚,网格系统等有样式
  • _components.sass.sass. - 该项目所需的每个组件的样式,包括按钮,模态等。
  • _app.sass. — imports

这是我通常用于较小项目的那个。并且在作出决定使用什么样的结构时,该项目的大小通常是决定性因素。

为什么要使用这种结构?

您应该使用此组织结构有几个优点。首先,CSS文件缓存和这样做,需要为每个新页面访问下载新文件的需要。以这种方式,HTTP请求也会减少。

其次,由于只有一个文件,这种结构更容易维护。

第三,CSS文件可以压缩,从而降低其大小。为了更好的结果,建议使用SASS /少,然后执行文件的连接和缩小。

如果文件变为杂乱,您需要扩展结构。在这种情况下,您可以为组件添加一个文件夹,并将其进一步分解为单个文件。如果项目扩大并需要重组整个SASS结构,请考虑下一个更复杂的模式。

7-1图案结构

此结构的名称来自7个文件夹,1个文件。这种结构被许多人使用,因为它被认为是较大尺寸的项目的良好基础。您需要做的就是组织7个不同文件夹中的部分,一个文件(app.sass)应该坐在处理导入的根级别。这是一个例子:

sass/
|
|- abstracts/
|  |- _mixins             // Sass Mixins Folder
|  |- _variables.scss     // Sass Variables
|
|- core/
|  |- _reset.scss         // Reset
|  |- _typography.scss    // Typography Rules
|
|- components/
|  |- _buttons.scss       // Buttons
|  |- _carousel.scss      // Carousel
|  |- _slider.scss        // Slider
|
|- layout/
|  |- _navigation.scss    // Navigation
|  |- _header.scss        // Header
|  |- _footer.scss        // Footer
|  |- _sidebar.scss       // Sidebar
|  |- _grid.scss          // Grid
|
|- pages/
|  |- _home.scss          // Home styles
|  |- _about.scss         // About styles
|
|- sections/ (or blocks/)
|  |- _hero.scss          // Hero section
|  |- _cta.scss           // CTA section
|
|- vendors/ (if needed)
|  |- _bootstrap.scss     // Bootstrap
|
- app.scss                // Main Sass file

在里面 抽象的 部分,有一个包含所有变量,Mixins和类似组件的文件。

部分包含在整个网站上使用的排版,重置和样板代码等文件。写入此代码后,没有进一步的覆盖。

成分 部分包含要为一个网站创建的所有组件的样式,包括按钮,旋转板,标签,模态等。

布局 部分是站点布局所需的所有风格,即页眉,页脚。

页面 部分包含每个单独页面的样式。几乎每个页面都需要具有仅用于该特定页面的特定样式。

对于要重复使用的每个部分和要轻松访问的SASS代码,就有 部分/块 部分的。此外,重要的是要使这部分部分是为了使您无需搜索特定代码是否在HOME.SASS或ABS.SASS文件中。

将每个部分放在单独的.sass文件中是一个好主意。因此,如果您有两个不同的英雄部分,请将代码放在同一文件中以知道您可以找到两个部分的代码。如果您遵循此模式,则此文件夹中将拥有大多数文件。

供应商 Partial适用于Bootstrap Frameworks,因此,如果您在项目中使用一个,请创建此部分。

我建议您使用app.sass作为主文件夹。这是它应该看的:

// Abstract files
@import "abscracts/all";

// Vendor Files
@import "vendor/bootstrap.scss";

// Core files
@import "core/all";

// Components
@import "components/all";

// Layout
@import "layout/all";

// Sections
@import "sections/all";

// Pages
@import "pages/all";

而不是在文件中具有大量导入,而是在每个文件夹中创建一个全部。每个All.Sass文件都应包含该文件夹的所有导入 - 并使其更加可见和可理解,请创建一个主文件。

组织

这种结构的最大好处是组织。您总是知道您是否需要更改特定的东西的位置。例如,如果要更改部分/块上的间距,则将您直接转到部分/块文件夹。这样,您无需在文件夹中搜索以查找文件中的类。

促进

构造代码时,会迅速促进进程。它们被简化,并且代码的每个部门都有自己的位置。

 

最后的话

组织代码对于开发人员来说至关重要,以及所有其他技能,它是提高网站运作的最有效方法。尽管有多种组织和不同的策略方式,但为简单选择有助于您避免危险的陷阱。最后,没有权利或错误的选择,因为一切都取决于开发人员的工作策略。

 

特色图像 通过Reshot..