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

Ответ 1

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

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

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

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

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

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

Ответ 2

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

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

Ответ 3

Просмотрите проект sass-globbing.

Ответ 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".

Ответ 5

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

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

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

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

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

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

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

Ответ 6

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

не похож на него.

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

Ответ 7

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

@import
  'foo',
  'bar';

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

Ответ 8

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

@import 'folder/*';

Ответ 9

Я также ищу ответ на ваш вопрос. В соответствии с ответами правильная импортная функция не существует.

Вот почему я написал питон script, который вам нужно поместить в корень вашей папки 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';

Ответ 10

будут компилироваться в

• @import "foo.css";
• экран @import "foo";
• @import " http://foo.com/bar";

Также возможно импортировать несколько файлов в один файл @import. Например:

@import "закругленные углы", "text-shadow";

http://sass-lang.com/documentation/file.SASS_REFERENCE.html

Ответ 11

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

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

Ответ 12

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

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

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