Чи можна імпортувати весь каталог у sass за допомогою @import?

Я модулюю свої таблиці стилів за допомогою 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 чи щось таке?

Якщо ви використовуєте 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

Щоб відповісти на занепокоєння в іншій відповіді: "Якщо ви імпортуєте каталог, як ви можете визначити порядок імпорту? Не існує способу, який би не вніс якийсь новий рівень складності".

Дехто заперечує, що впорядкування файлів у каталогах може зменшити складність.

Проект моєї організації - це досить складний додаток. У 119 каталогах є 119 файлів Sass. Вони приблизно відповідають нашим поглядам і в основному використовуються для коригування, оскільки важкий підйом обробляється нашою спеціальною системою. Для мене кілька рядків імпортних каталогів - це менш складний, ніж 119 рядків імпортованих імен файлів.

Для вирішення порядку завантаження ми розміщуємо файли, які спочатку потрібно завантажити - mixins, змінні тощо - у каталог раннього завантаження. Інакше порядок завантаження є і повинен бути неактуальним ... якщо ми робимо все належним чином.

Ця функція ніколи не буде частиною Sass. Однією з головних причин є замовлення на імпорт. У CSS файли, що імпортуються останніми, можуть змінювати стилі, зазначені раніше. Якщо ви імпортуєте каталог, як визначити порядок імпорту? Ні в якому разі не вводиться якийсь новий рівень складності. Зберігаючи список імпорту (як це було у вашому прикладі), ви отримуєте чітке замовлення на імпорт. Це важливо, якщо ви хочете мати можливість впевнено змінювати стилі, визначені в іншому файлі, або записувати міксинги в один файл і використовувати їх в іншому.

Для більш ретельного обговорення перегляньте цей закритий запит на функції тут:

Ознайомтеся з проектом sass-globbing .

Я створюю файл, названий __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".

Ви можете трохи вирішити, помістивши в папку файл sass те, що ви хотіли б імпортувати та імпортувати у цей файл.

шлях до файлу: main / current / _current.scss

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

а в наступному файлі рівня dir ви просто використовуєте import для файлу, який імпортував усі файли з цього dir:

шлях до файлу: main / main.scss

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

Таким чином у вас є однакова кількість файлів, як ви імпортуєте весь dir. Остерігайтеся порядку, останній файл замінить відповідні стилі.

Можливо, ви захочете зберегти вихідний порядок, тоді ви можете просто скористатися цим.

@import
  'foo',
  'bar';

Я вважаю за краще це.

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

не схоже на це.

Якщо будь-який із цих файлів завжди потребує інших, то імпортуйте інші файли та імпортуйте лише файли верхнього рівня. Якщо вони всі автономні, то, я думаю, вам доведеться продовжувати робити так, як зараз.

У прийнятій відповіді Деніса Беста сказано, що "в іншому випадку порядок завантаження є і повинен бути неактуальним ... якщо ми робимо все правильно". Це просто неправильно. Якщо ви все робите належним чином, ви використовуєте наказ 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, для ситуацій, коли порядок не має значення, як-от каталог мікшин або навіть анімації.

Я також шукаю відповідь на ваше запитання. Відповідайте на відповіді правильної функції імпорту всіх функцій не існує.

Ось чому я написав скрипт 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';

це добре працювало для мене

@import 'folder/*';

Ви можете створити файл 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
]

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

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

Так, @import "style/*" складе всі файли в папці стилів.

Більше про функцію імпорту в Sass ви можете прочитати тут .