1

一个以导入其他 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 规则和命名有点相似，但它不包括我的问题。

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

4

2 回答 2

3

主要的 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
于 2018-12-16T14:30:51.700 回答
0

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

通常，对于不想单独编译的任何内容，您都会使用“部分”scss 文件。

部分文件只是一个以前导下划线命名的 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 内部：导入所有部分组件文件..（与源相同）

然后，您将这些导入到要编译的文件中。（无下划线文件名）：

默认.scss：

@import
'components';


@import
'source';

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

于 2018-12-17T15:21:10.653 回答