import - переменных - как импортировать файлы в sass




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

Я modularizing мои таблицы стилей с частицами 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 или что-то еще?


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


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

@import
  'foo',
  'bar';

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


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



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

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


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


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

@import 'folder/*';

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

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

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