Как назвать файл Sass, содержащий только операторы @import

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?Или что-то еще?

Я не смог найти ни одного соответствующего поста или документации по этому вопросу, кроме этой темы переполнения стека: Правила Sass @Import и именование , что несколько похоже, но это не так.t охватить мой вопрос.

Пожалуйста, поддержите ваш ответ аргументами / примерами, если это возможно.

Answer 1

Все будет зависеть от того, как вы собираетесь скомпилировать ваши scss в проекте, и как работает рабочий процесс проекта.

Обычно вы используете scss-файлы "Partial" для всего, что не нужно компилировать отдельно.

Partical - это просто файл 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';

Я надеюсь, что это ответ на ваш вопрос.

Answer 2

Основной файл 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