Можно ли импортировать весь каталог в sass с помощью @import?

Если вы используете Sass в проекте Rails, гем sass-rails, https://github.com/rails/sass-rails, функции импорта глобусов.

@import "foo/*"     // import all the files in the foo folder
@import "bar/**/*"  // import all the files in the bar tree

Чтобы ответить на озабоченность в другом ответе: «Если вы импортируете каталог, как вы можете определить порядок импорта? Нет никакого способа, который не привнесет какой-то новый уровень сложности».

Некоторые утверждают, что организация файлов в каталогах может УМЕНЬШИТЬ сложность.

Проект моей организации - довольно сложное приложение. В 17 каталогах находится 119 файлов Sass. Они примерно соответствуют нашим взглядам и в основном используются для корректировок, при этом тяжелая работа выполняется нашей пользовательской структурой. Для меня несколько строк импортированных каталогов немного проще, чем 119 строк импортированных имен файлов.

Чтобы изменить порядок загрузки, мы помещаем файлы, которые нужно загрузить первыми - миксины, переменные и т. Д. - в каталог ранней загрузки. В противном случае порядок загрузки не имеет значения ... если мы все делаем правильно.

Эта функция никогда не будет частью Sass. Одна из основных причин - это импортный заказ. В CSS файлы, импортированные последними, могут переопределять стили, указанные ранее. Если вы импортируете каталог, как вы можете определить порядок импорта? Невозможно не ввести новый уровень сложности. Сохраняя список импорта (как в своем примере), вы четко указываете порядок импорта. Это важно, если вы хотите иметь возможность уверенно переопределять стили, определенные в другом файле, или записывать миксины в один файл и использовать их в другом.

Для более подробного обсуждения просмотрите этот закрытый запрос функции здесь:

Ознакомьтесь с проектом sass-globbing.

Я создаю файл с именем __partials__.scss в том же каталоге partials

|- __partials__.scss
|- /partials
   |- __header__.scss
   |- __viewport__.scss
   |- ....

В __partials__.scss я написал следующее:

@import "partials/header";
@import "partials/viewport";
@import "partials/footer";
@import "partials/forms";
....

Итак, когда я захочу импортировать весь partials, просто напишите @import "partials". Если я хочу импортировать какой-либо из них, я также могу написать @import "partials/header".

Вы можете использовать обходной путь, поместив файл sass в папку, которую вы хотите импортировать, и импортировать все файлы в этом файле следующим образом:

путь к файлу: main / current / _current.scss

@import "placeholders"; @import "colors";

и в следующем файле уровня каталога вы просто используете import для файла, который импортировал все файлы из этого каталога:

путь к файлу: main / main.scss

@import "EricMeyerResetCSSv20"; @import "clearfix"; @import "current";

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

Это может быть старый вопрос, но он все еще актуален в 2020 году, поэтому я могу опубликовать некоторые обновления. После обновления Octobers'19 мы обычно должны использовать @use вместо @import, но это всего лишь примечание. Решение этого вопроса - использовать индексные файлы, чтобы упростить включение целых папок. Пример ниже.

// foundation/_code.scss
code {
  padding: .25em;
  line-height: 0;
}

// foundation/_lists.scss
ul, ol {
  text-align: left;

  & & {
    padding: {
      bottom: 0;
      left: 0;
    }
  }
}

// foundation/_index.scss
@use 'code';
@use 'lists';

// style.scss
@use 'foundation';

https://sass-lang.com/documentation/at-rules/use#index-files

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#import

не похоже на это.

Если для одного из этих файлов всегда требуются другие, попросите их импортировать другие файлы и импортировать только файлы верхнего уровня. Если они все автономны, то я думаю, вам придется продолжать делать это, как сейчас.

Вы можете захотеть сохранить исходный порядок, тогда вы можете просто использовать это.

@import
  'foo',
  'bar';

Я предпочитаю это.

Я тоже ищу ответ на ваш вопрос. Соответствуют ответам правильной функции импорта всего не существует.

Вот почему я написал скрипт python, который вам нужно поместить в корень вашей папки scss следующим образом:

- scss
  |- scss-crawler.py
  |- abstract
  |- base
  |- components
  |- layout
  |- themes
  |- vender

Затем он пройдется по дереву и найдет все файлы scss. После выполнения он создаст файл scss с именем main.scss.

#python3
import os

valid_file_endings = ["scss"]

with open("main.scss", "w") as scssFile:
    for dirpath, dirs, files in os.walk("."):
        # ignore the current path where the script is placed
        if not dirpath == ".":
            # change the dir seperator
            dirpath = dirpath.replace("\\", "/")

            currentDir = dirpath.split("/")[-1]
            # filter out the valid ending scss
            commentPrinted = False
            for file in files:
                # if there is a file with more dots just focus on the last part
                fileEnding = file.split(".")[-1]
                if fileEnding in valid_file_endings:
                    if not commentPrinted:
                        print("/* {0} */".format(currentDir), file = scssFile)
                        commentPrinted = True
                    print("@import '{0}/{1}';".format(dirpath, file.split(".")[0][1:]), file = scssFile)

пример выходного файла:

/* abstract */
@import './abstract/colors';
/* base */
@import './base/base';
/* components */
@import './components/audioPlayer';
@import './components/cardLayouter';
@import './components/content';
@import './components/logo';
@import './components/navbar';
@import './components/songCard';
@import './components/whoami';
/* layout */
@import './layout/body';
@import './layout/header';

В принятом ответе Денниса Беста говорится: «В противном случае порядок загрузки не имеет и не должен иметь значения ... если мы все делаем правильно». Это просто неверно. Если вы все делаете правильно, вы используете порядок CSS, чтобы уменьшить специфичность и сохранить простой и понятный CSS.

Для организации импорта я добавляю файл _all.scss в каталог, куда я импортирую все соответствующие файлы в правильном порядке. Таким образом, мой основной файл импорта будет простым и чистым, например:

// Import all scss in the project

// Utilities, mixins and placeholders
@import 'utils/_all';

// Styles
@import 'components/_all';
@import 'modules/_all';
@import 'templates/_all';

Вы можете сделать это и для подкаталогов, если вам нужно, но я не думаю, что структура ваших файлов css должна быть слишком глубокой.

Хотя я использую этот подход, я все же считаю, что импорт глобуса должен существовать в sass для ситуаций, когда порядок не имеет значения, например, каталог миксинов или даже анимаций.

Вы можете сгенерировать файл SASS, который импортирует все автоматически, я использую эту задачу Gulp:

concatFilenames = require('gulp-concat-filenames')

let concatFilenamesOptions = {
    root: './',
    prepend: "@import '",
    append: "'"
}
gulp.task('sass-import', () => {
    gulp.src(path_src_sass)
        .pipe(concatFilenames('app.sass', concatFilenamesOptions))
        .pipe(gulp.dest('./build'))
})

Вы также можете контролировать порядок импорта, упорядочивая папки следующим образом:

path_src_sass = [
    './style/**/*.sass', // mixins, variables - import first
    './components/**/*.sass', // singule components
    './pages/**/*.sass' // higher-level templates that could override components settings if necessary
]

это сработало для меня

@import 'folder/*';

Определив файл для импорта, можно использовать общие определения всех папок.

Итак, @import "style/*" скомпилирует все файлы в папке стилей.

Дополнительную информацию о функции импорта в Sass можно найти здесь.