Czy można zaimportować cały katalog w sass za pomocą @import?

Moduluję swoje arkusze stylów za pomocą częściowych części SASS, takich jak:

@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

czy istnieje sposób na włączenie całego katalogu częściowego (jest to katalog pełen częściowych SASS), takich jak kompas @import czy coś takiego?

Jeśli używasz Sass w projekcie Rails, klejnot sass-rails, https://github.com/rails/sass-rails , oferuje globalne importowanie.

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

Aby odpowiedzieć na problem w innej odpowiedzi „Jeśli importujesz katalog, jak możesz ustalić kolejność importu? Nie ma mowy, aby nie wprowadził on nowego poziomu złożoności”.

Niektórzy twierdzą, że uporządkowanie plików w katalogach może ZMNIEJSZYĆ złożoność.

Projekt mojej organizacji to dość złożona aplikacja. W 119 katalogach znajduje się 119 plików Sass. Odpowiadają one w przybliżeniu naszym widokom i służą głównie do regulacji, a ciężkie podnoszenie jest obsługiwane przez naszą niestandardową ramę. Dla mnie kilka linii importowanych katalogów jest odrobinę mniej skomplikowanych niż 119 linii importowanych nazw plików.

Aby uwzględnić kolejność ładowania, umieszczamy pliki, które muszą zostać załadowane jako pierwsze - miksy, zmienne itp. - w katalogu wczesnego ładowania. W przeciwnym razie kolejność ładowania jest i powinna być nieistotna ... jeśli postępujemy właściwie.

Ta funkcja nigdy nie będzie częścią Sassa. Jednym z głównych powodów jest zamówienie importowe. W CSS pliki zaimportowane jako ostatnie mogą zastąpić podane wcześniej style. Jeśli importujesz katalog, jak możesz ustalić kolejność importu? Nie ma mowy, żeby nie wprowadzono nowego poziomu złożoności. Trzymając listę importów (tak jak w przykładzie), wyrażasz się wyraźnie w kolejności importu. Jest to niezbędne, jeśli chcesz mieć pewność, że możesz nadpisywać style zdefiniowane w innym pliku lub zapisywać miksy w jednym pliku i używać ich w innym.

Aby uzyskać bardziej szczegółową dyskusję, zobacz to zamknięte żądanie funkcji tutaj:

Sprawdź projekt sass-globbing .

Tworzę plik o nazwie __partials__.scssw tym samym katalogupartials

|- __partials__.scss
|- /partials
   |- __header__.scss
   |- __viewport__.scss
   |- ....

W __partials__.scssnapisałem te:

@import "partials/header";
@import "partials/viewport";
@import "partials/footer";
@import "partials/forms";
....

Więc kiedy chcę zaimportować całość partials, po prostu napisz @import "partials". Jeśli chcę zaimportować któryś z nich, mogę również napisać @import "partials/header".

Możesz użyć trochę obejścia, umieszczając plik sass w folderze, co chcesz zaimportować i zaimportować wszystkie pliki w tym pliku w następujący sposób:

ścieżka pliku: main / current / _current.scss

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

a w następnym pliku na poziomie katalogu wystarczy użyć importu do pliku, co zaimportowało wszystkie pliki z tego katalogu:

ścieżka pliku: main / main.scss

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

W ten sposób masz taką samą liczbę plików, jak podczas importowania całego katalogu. Uważaj na porządek, ostatni plik zastąpi pasujące słupki.

Możesz zachować kolejność źródeł, a następnie możesz po prostu z tego skorzystać.

@import
  'foo',
  'bar';

Wolę to.

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

nie wygląda na to.

Jeśli któryś z tych plików zawsze wymaga innych, to niech zaimportują inne pliki i zaimportują tylko pliki najwyższego poziomu. Jeśli wszystkie są samodzielne, myślę, że będziesz musiał robić to tak, jak teraz.

Przyjęta odpowiedź Dennis Best stwierdza, że ​​„W przeciwnym razie kolejność ładowania jest i powinna być nieistotna ... jeśli postępujemy właściwie”. To jest po prostu nieprawidłowe. Jeśli robisz wszystko poprawnie, korzystasz z kolejności css, aby pomóc Ci zmniejszyć specyficzność i zachować prostotę i czystość css.

Aby zorganizować importowanie, dodaję _all.scssplik do katalogu, w którym importuję wszystkie odpowiednie pliki, w odpowiedniej kolejności. W ten sposób mój główny plik importu będzie prosty i czysty, jak poniżej:

// Import all scss in the project

// Utilities, mixins and placeholders
@import 'utils/_all';

// Styles
@import 'components/_all';
@import 'modules/_all';
@import 'templates/_all';

Możesz to zrobić również dla podkatalogów, jeśli potrzebujesz, ale nie sądzę, aby struktura plików css była zbyt głęboka.

Chociaż używam tego podejścia, nadal uważam, że globalny import powinien istnieć w sass, w sytuacjach, w których porządek nie ma znaczenia, na przykład katalog miksów, a nawet animacji.

Poszukuję również odpowiedzi na twoje pytanie. Odpowiednio do odpowiedzi poprawny import wszystkich funkcji nie istnieje.

Właśnie dlatego napisałem skrypt Pythona, który musisz umieścić w katalogu głównym folderu scss w następujący sposób:

- scss
  |- scss-crawler.py
  |- abstract
  |- base
  |- components
  |- layout
  |- themes
  |- vender

Następnie przejdzie przez drzewo i znajdzie wszystkie pliki scss. Po uruchomieniu utworzy plik scss o nazwie 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)

przykład pliku wyjściowego:

/* 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';

to działało dobrze dla mnie

@import 'folder/*';

Możesz wygenerować plik SASS, który importuje wszystko automatycznie, używam tego zadania 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'))
})

Możesz także kontrolować kolejność importowania, zamawiając takie foldery:

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
]

To może być stare pytanie, ale wciąż aktualne w 2020 roku, więc mogę opublikować aktualizację. Od czasu aktualizacji Octobers'19 powinniśmy używać @use zamiast @import , ale to tylko uwaga. Rozwiązaniem tego pytania jest użycie plików indeksu w celu uproszczenia, w tym całych folderów. Przykład poniżej.

// 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

Po zdefiniowaniu pliku do zaimportowania można używać wszystkich wspólnych definicji wszystkich folderów.

Więc, @import "style/*" skompiluje wszystkie pliki w folderze stylu.

Więcej informacji o funkcji importowania w Sass można znaleźć tutaj .