如何命名仅包含 @import 语句的 Sass 文件答案

【问题标题】：How to name a Sass file containing only @import statements如何命名仅包含 @import 语句的 Sass 文件
【发布时间】：2019-05-17 02:20:21
【问题描述】：

应该如何命名一个仅用于导入其他 Sass 文件的 Sass 文件？

是否有任何适用于此的规则或通用“行业标准”？

假设我们有以下文件结构：

萨斯/ |-- 全球/ | `-- 文件.sass `--供应商/ `--引导程序/ |-- 变量.sass `-- mixins.sass

和file.sass下的global/只包含

@import "../vendor/bootstrap/variables"; @import "../vendor/bootstrap/mixins";

file.sass 应该如何命名？

是bootstrap.sass 还是bootstrap-loader.sass？还是别的什么？

我找不到任何相关的帖子或文档来解决这个问题，除了这个 Stack Overflow 线程： Sass @Import rules and naming 有点相似，但没有涵盖我的问题。

如果可能，请用论据/例子来支持你的回答。

【问题讨论】：

该名称的唯一目的是告诉您项目的未来开发人员它包含的内容，而无需打开它。所以你可以将它命名为global、imports、general 或all。但是，最终，它是基于意见的。您编写此问题所付出的努力远远超过了根据其他开发人员的偏好命名该文件所获得的好处，顺便说一句，这与null 非常接近。条件是“它必须有意义”和命名约定“应该在整个项目中保持一致”。
感谢您的回答@AndreiGheorghiu，但您遗漏了几件事。首先，我不想做“努力”节省，我只是想改进自己和我的编码最佳实践，就像周围其他用户可能想要的那样。其次，我不同意你给出的任何例子（global、imports、general、all）。我的情况是我只从供应商/库/模块中导入一些文件。尽管我同意你的观点，“必须对未来的开发人员有意义”并且“应该在整个项目中保持一致”。
虽然一致且易于理解的命名约定从长远来看会大大缩短开发时间，尤其是在大型应用程序中，但在技术上无法确定一种正确的文件命名方式。这意味着任何答案都将是有意见的。你完全拒绝了我所有其他体面的建议，这正是证明了这一点，其他 3 位开发人员似乎已经同意了。这使您在Stack Overflow 上的问题离题。此外，我的评论不是答案，特别是因为根据 SO 指南，您的问题不应该得到回答。

标签： css sass

【解决方案1】：

主要的 CSS/Sass 文件通常称为 main.scss/main.css 或 style.scss/style.css。

引用thesassyway.com 的结构如下：

stylesheets/
|
|-- modules/              # Common modules
|   |-- _all.scss         # Include to get all modules
|   |-- _utility.scss     # Module name
|   |-- _colors.scss      # Etc...
|   ...
|
|-- partials/             # Partials
|   |-- _base.sass        # imports for all mixins + global project variables
|   |-- _buttons.scss     # buttons
|   |-- _figures.scss     # figures
|   |-- _grids.scss       # grids
|   |-- _typography.scss  # typography
|   |-- _reset.scss       # reset
|   ...
|
|-- vendor/               # CSS or Sass from other projects
|   |-- _colorpicker.scss
|   |-- _jquery.ui.core.scss
|   ...
|
`-- main.scss            # primary Sass file

在捆绑了多个子项目的企业级项目中，您可以命名主文件并将其划分为不同的文件，并在每个项目之后命名。

stylesheets/
|
|-- admin/           # Admin sub-project
|   |-- modules/
|   |-- partials/
|   `-- _base.scss
|
|-- account/         # Account sub-project
|   |-- modules/
|   |-- partials/
|   `-- _base.scss
|
|-- site/            # Site sub-project
|   |-- modules/
|   |-- partials/
|   `-- _base.scss
|
|-- vendor/          # CSS or Sass from other projects
|   |-- _colorpicker-1.1.scss
|   |-- _jquery.ui.core-1.9.1.scss
|   ...
|
|-- admin.scss       # Primary stylesheets for each project
|-- account.scss
`-- site.scss

【讨论】：

【解决方案2】：

这完全取决于您打算如何在项目中编译 scss，以及项目的工作流程如何工作。

通常你会使用“部分”scss 文件来处理你不想单独编译的任何东西。

partial 只是一个以下划线开头的 Sass 文件。您可以将其命名为 _partial.scss。下划线让 Sass 知道该文件只是部分文件，不应将其生成为 CSS 文件。 Sass 部分与 @import 指令一起使用。来源：https://sass-lang.com/guide

项目内的基本典型工作流程可能如下所示..（取决于项目的范围）：

Src (Folder)
-- JS (Folder)
--Scss (Folder)
   -- Components (Folder)
       -- _button.scss
       -- _animation.scss
   -- Pages Folder
       -- cms (Folder)
          -- _about.scss
          -- _contact.scss
-- _components.scss
-- _source.scss
-- default.scss

在 _source.scss 中：导入所有cms页面部分/其他..

@import
'pages/cms/button',
'pages/cms/animation';

注意：您不需要在此导入中的文件名前使用下划线。

在 _components.scss 中：导入所有部分组件文件..（与源相同）

然后将这些导入到要编译的文件中..（没有下划线文件名）：

default.scss：

@import
'components';


@import
'source';

我希望这能回答你的问题。

【讨论】：