Можно ли импортировать весь каталог в sass, используя @import?

Я модулирую свои таблицы стилей с частями SASS следующим образом:

@import partials/header
@import partials/viewport
@import partials/footer
@import partials/forms
@import partials/list_container
@import partials/info_container
@import partials/notifications
@import partials/queues

Есть ли способ включить весь каталог partials (это каталог, полный SASS-partials), например @import compass или что-то еще?

Если вы используете 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";

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

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

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

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

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

@import
  'foo',
  'bar';

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

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

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

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

В принятом ответе Денниса Беста говорится, что «в противном случае порядок загрузки является и не должен иметь значения ... если мы делаем все правильно». Это просто неверно. Если вы все делаете правильно, вы используете порядок 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, для ситуаций, где порядок не имеет значения, например, каталог миксинов или даже анимации.

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

Вот почему я написал скрипт на 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';

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

@import 'folder/*';

Вы можете создать файл 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
]

Это может быть старый вопрос, но он все еще актуален в 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

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

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

Подробнее о функции импорта в Sass вы можете найти здесь .