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

Question

Я модулирую свои таблицы стилей с помощью паролей 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

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

Answer 1

Если вы используете 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 строк импортированных имен файлов.

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

Answer 2

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

Answer 3

Проверьте проект sass-globbing .

Answer 4

Я создаю файл с именем __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".

Answer 5

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

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

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

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

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

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

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

Answer 6

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

Answer 7

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

@import
  'foo',
  'bar';

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

Answer 8

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

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

Answer 9

http://sass -lang.com / документы / yardoc / file.SASS_REFERENCE.html # импорт

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

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

Answer 10

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