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

209

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

коррозия
источник
3
Не ответ, но полезно: SASS может импортировать несколько файлов за один импорт, например @import 'partials/header', 'partials/viewport', 'partials/footer';.
Льобет

Ответы:

201

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

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

Деннис Бест
источник
7
или добавьте @import "*"(в application.css.scss), если файлы css / scss вашего контроллера находятся в папке "app / assets / stylesheets" вместе с application.css.scss.
Магне
эта «жемчужина» глючит и не работает на окнах, посмотрите на эту проблему, которая была открыта в течение долгого времени, и по существу означает, что она полностью сломана github.com/chriseppstein/sass-globbing/issues/3
pilavdzice
Вы говорите о жемчужине Криса Эппштейна. В моем ответе используется самоцвет сасс-рельсы, который, я думаю, отличается. Я не на Windows, но я не вижу никаких проблем, связанных с жемчужиной sass-rails.
Деннис Бест
1
Это не сработало для меня - разбивка была разбита на отдельные строки отдельных файлов. Который неприятно, работал в dev, но не в производственном режиме (поскольку существует только один путь к корневому ресурсу application.css в производственном процессе)
Питер Эрлих
5
Работал отлично для меня, спасибо за этот совет. Я приятно удивлен, что высказывание @import "*"в application.scss включает в себя все другие файлы, присутствующие в том же каталоге, но не включает вновь application.scss ... Я ожидал получить ошибку с бесконечным циклом.
Topher Hunt
94

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

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

Брэндон Матис
источник
260
для хорошо структурированных CSS-файлов порядок включения не должен иметь значения
Милован Зогович
57
@MilovanZogovic Полное использование переопределений имеет запах кода, но нет ничего плохого в использовании каскада. Это как язык был разработан.
Брэндон Матис
34
@BrandonMath: Я понимаю теоретическую чистоту здесь, но в реализации (моя и я предполагаю, что коррозия) вы можете написать свой CSS так, чтобы разные файлы не влияли друг на друга. У меня есть каталог под названием «модули» с файлами, каждый из которых содержит различные правила класса CSS. Я хочу, чтобы все файлы в этом каталоге были включены, и их порядок не важен и никогда не будет иметь особого значения. Больно обновлять список каждый раз, когда я добавляю новый.
Робин Уинслоу
5
Если у меня есть каталог, который заполнен неприменимыми css,% rules, функциями и т. Д., То здесь нет никакого риска, а обратное (не разрешающее) просто приводит к бесполезной утомительности и длинным «заголовкам импорта» в файлах вместо того, что может быть просто одна строка @import "/functions"или @import "partials/".
srcspider
3
Одним из вариантов использования является импорт модулей, где порядок не важен, а стили могут быть пространством имен ... Я хотел бы увидеть эту функцию - хотя согласен, что ее следует использовать с умом ...
Уилл Хэнкок,
41

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

Акшай Рават
источник
1
мой комментарий устарел на несколько лет, но ... у проекта с саблезубами есть несколько медленный прогресс, и только один разработчик, который не слишком беспокоится о том, чтобы заставить вещи работать на Windows. Мы только начинаем создавать новый, который работает на Linux, Mac и Windows
Стюарт
33

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

топь
источник
2
Это довольно хорошее решение. Это то, что делает компас, чтобы упростить их включение +1
Джетро Ларсон
8
Это в основном то же самое, что и настройка OP. Он хотел бы импортировать файлы без добавления @import 'partials/xyz'операторов каждый раз, когда создается новый фрагмент.
Ги
1
Downvoters + Upvoters: не могли бы вы объяснить, чем этот ответ отличается от настройки OP?
Ги
4
Это ничего не решает.
oligofren
2
@gyo ОП не помогает, если у них есть только один каталог партиалов, но помогает людям с несколькими каталогами партиалов. Если у меня есть formsи widgetsкаталоги, я могу @import "forms"; @import "widgets"в основном файле CSS для страницы, и беспокоиться только о всех отдельных частей ( @import forms/text; @import forms/button...) внутри forms.scssи widgets.scss.
ttotherat
4

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

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

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

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

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

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

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

IGRACH
источник
3

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

@import
  'foo',
  'bar';

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

dewwwald
источник
2

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

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

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

xaxxon
источник
да, видел документацию, просто проверил, знает ли кто-нибудь трюк или надеется, что это просто недокументированный, смеется Спасибо за предложение, хотя
коррозия
2

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

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

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

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

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

@import 'folder/*';
Сиддхартха Мукерджи
источник
7
Я думаю, что это из-за рубиновой функции, а не SASS. Некоторые компиляторы имеют проблемы с этим способом. Например, я использовал это с помощью gulp-ruby-sass, и это сработало, но с помощью gulp-sass возникла ошибка.
Мортеза Зияе
0

Вы можете создать файл 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
]
Миро Юнкер
источник
0

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

мыслитель
источник
1
Я думаю, что вы хотите использовать @forwardв своем _index.scss вместо@use
Исаак Пак
-4

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

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

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

Неша Зорич
источник