多个 SCSS/LESS 文件或 1 个大文件答案

【问题标题】：Multiple SCSS/LESS files or 1 big file多个 SCSS/LESS 文件或 1 个大文件
【发布时间】：2016-12-22 17:14:48
【问题描述】：

我们是一家小型设计/网上商店。我最近使用 gulp 和 SASS/SCSS 设置了一个新的基础仓库。当我设置我们的 SCSS 文件结构时，我将我们正在使用的一个巨大的 LESS 文件分解成一堆较小的 SCSS 文件。

新结构是这样的

内部

供应商

显然这是一个简化的布局。

这引起了内部讨论。我们中的一些人更喜欢拥有 1 个大的 LESS 文件，而我们中的一些人（我）喜欢将样式分解成自己的工作表。当我在网上查看其他 SCSS 实现时，我看到他们将 SCSS 分解为多个工作表，但这对于自定义/内部样式表来说可能不是最好的。

我无法说服其他人这是正确的方法。

有人可以以一种或另一种方式为我提供一个好的论据吗？一个大型 SCSS 文件是否更容易用于内部/自定义内容，还是我们应该使用多个文件。

【问题讨论】：

我认为这取决于个人喜好。我更喜欢将它们放在较小的文件中，因为这样您就可以划分样式并更容易找到事情。如果您知道仅在 X 页或 Y 部分具有特定样式，则可以查看该文件，而不必加载单个整体并搜索该文件。它（可以说）还使合并更易于管理，因为它只对小文件进行更改，而不是对一个大文件进行大量更改。
我们为我们的内部需求创建了类似的东西。我们以bootstrap-scss 端口方法为指导。将所有内容分解成小块，因为您始终可以使用这些部分的简单 @imports 创建一个大文件（与主 bootstrap-scss 文件相同）。一旦您走“一个文件中的所有内容”的路线，就很难将其分解。

【解决方案1】：

许多模块化床单每次都击败一张大床单。我没有参与过很多大型客户项目，但是由于我已经切换到模块化工作表，因此交出代码或与团队合作要好得多。

Bootstrap 是最流行的 CSS 框架是有原因的。我采用了他们的理念并构建了一个类似于您上面描述的系统，我用它来搭建每个项目的脚手架。组织从未像现在这样好，而且不必滚动或 cmd + f 浏览一张巨大的表格，每天为我节省了几分钟。

【讨论】：