Question

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

是否有适用于此的规则或一般的“行业标准”？

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

sass/
|-- global/
|   `-- file.sass
`-- vendor/
    `-- bootstrap/
        |-- variables.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有点相似，但没有涵盖我的问题。

如果可能，请使用参数/示例来支持您的答案。

Answer 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

Answer 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';

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

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

2 个答案: