Я модулирую свои таблицы стилей с частями 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 или что-то еще?
@import 'partials/header', 'partials/viewport', 'partials/footer';
.Ответы:
Если вы используете Sass в проекте Rails, гем sass-rails, https://github.com/rails/sass-rails , содержит импорт глобусов.
Чтобы ответить на вопрос в другом ответе: «Если вы импортируете каталог, как вы можете определить порядок импорта? Нет способа, который не привел бы к некоторому новому уровню сложности».
Некоторые утверждают, что организация ваших файлов в каталоги может уменьшить сложность.
Проект моей организации - довольно сложное приложение. В 17 каталогах 119 файлов Sass. Они примерно соответствуют нашим представлениям и в основном используются для корректировок, а тяжелая работа выполняется с помощью нашей пользовательской структуры. Для меня несколько строк импортированных каталогов немного сложнее, чем 119 строк импортированных имен файлов.
Чтобы определить порядок загрузки, мы помещаем файлы, которые должны быть загружены первыми - миксины, переменные и т. Д. - в каталог с ранней загрузкой. В противном случае порядок загрузки является и должен быть неактуальным ... если мы все делаем правильно.
источник
@import "*"
(в application.css.scss), если файлы css / scss вашего контроллера находятся в папке "app / assets / stylesheets" вместе с application.css.scss.@import "*"
в application.scss включает в себя все другие файлы, присутствующие в том же каталоге, но не включает вновь application.scss ... Я ожидал получить ошибку с бесконечным циклом.Эта функция никогда не будет частью Sass. Одной из основных причин является порядок импорта. В CSS файлы, импортированные последними, могут переопределять стили, указанные ранее. Если вы импортируете каталог, как вы можете определить порядок импорта? Там нет способа, который не вводит какой-то новый уровень сложности. Сохраняя список импорта (как вы сделали в своем примере), вы явно указываете порядок импорта. Это важно, если вы хотите иметь возможность уверенно переопределять стили, которые определены в другом файле, или записывать миксины в одном файле и использовать их в другом.
Для более подробного обсуждения просмотрите эту закрытую заявку здесь:
источник
@import "/functions"
или@import "partials/"
.Проверьте проект sass-globbing .
источник
Я создаю файл с именем
__partials__.scss
в том же каталогеpartials
В
__partials__.scss
, я написал это:Поэтому, когда я хочу импортировать целое
partials
, просто пишите@import "partials"
. Если я хочу импортировать любой из них, я также могу написать@import "partials/header"
.источник
@import 'partials/xyz'
операторов каждый раз, когда создается новый фрагмент.forms
иwidgets
каталоги, я могу@import "forms"; @import "widgets"
в основном файле CSS для страницы, и беспокоиться только о всех отдельных частей (@import forms/text; @import forms/button
...) внутриforms.scss
иwidgets.scss
.Вы можете использовать несколько обходных путей, поместив файл sass в папку, которую вы хотите импортировать и импортировать все файлы в этом файле, например:
путь к файлу: main / current / _current.scss
@import "placeholders"; @import "colors";
и в следующем файле уровня каталога вы просто используете импорт для файла, который импортировал все файлы из этого каталога:
путь к файлу: main / main.scss
@import "EricMeyerResetCSSv20"; @import "clearfix"; @import "current";
Таким образом, у вас будет такое же количество файлов, как вы импортируете весь каталог. Остерегайтесь порядка, файл, который прибывает последним, переопределит соответствующие стили.
источник
Возможно, вы захотите сохранить исходный порядок, тогда вы можете просто использовать это.
Я предпочитаю это.
источник
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#import
не похоже на это.
Если для любого из этих файлов всегда требуются другие, попросите их импортировать другие файлы и импортировать только файлы верхнего уровня. Если они все автономны, то я думаю, что вам придется продолжать делать это, как сейчас.
источник
В принятом ответе Денниса Беста говорится, что «в противном случае порядок загрузки является и не должен иметь значения ... если мы делаем все правильно». Это просто неверно. Если вы все делаете правильно, вы используете порядок css, чтобы помочь вам снизить специфичность и сохранить простоту и чистоту css.
Для организации импорта я добавляю
_all.scss
файл в каталог, куда я импортирую все соответствующие файлы, в правильном порядке. Таким образом, мой основной файл импорта будет простым и чистым, например так:Вы можете сделать это и для подкаталогов, если вам нужно, но я не думаю, что структура ваших CSS-файлов должна быть слишком глубокой.
Хотя я использую этот подход, я все еще думаю, что импорт глобуса должен существовать в sass, для ситуаций, где порядок не имеет значения, например, каталог миксинов или даже анимации.
источник
Я также ищу ответ на ваш вопрос. Соответствующих ответов правильного импорта всех функций не существует.
Вот почему я написал скрипт на python, который вам нужно поместить в корень вашей папки scss:
Затем он пройдет по дереву и найдет все файлы scss. После выполнения он создаст файл scss с именем main.scss.
пример выходного файла:
источник
это работало нормально для меня
источник
Вы можете создать файл SASS, который импортирует все автоматически, я использую эту задачу Gulp:
Вы также можете контролировать порядок импорта, упорядочивая папки следующим образом:
источник
Это может быть старый вопрос, но он все еще актуален в 2020 году, поэтому я могу опубликовать некоторые обновления. После обновления Octobers'19 мы обычно должны использовать @use вместо @import , но это только замечание. Решением этого вопроса является использование индексных файлов для упрощения, включая целые папки. Пример ниже.
https://sass-lang.com/documentation/at-rules/use#index-files
источник
@forward
в своем _index.scss вместо@use
С определением файла для импорта можно использовать общие определения всех папок.
Итак,
@import "style/*"
скомпилируем все файлы в папке style.Подробнее о функции импорта в Sass вы можете найти здесь .
источник