Czy można zaimportować cały katalog w sass używając @import?

Ta funkcja nigdy nie będzie częścią Sass. Jednym z głównych powodów jest zamówienie importu. W CSS, Ostatnio zaimportowane pliki mogą nadpisać style podane wcześniej. Jeśli importujesz Katalog, jak możesz określić kolejność importu? Nie ma mowy, żeby nie wprowadzić nowego poziomu złożoności. Zachowując listę importów (tak jak w przykładzie), wyraźnie wyrażasz zamówienie importu. Jest to niezbędne, jeśli chcesz mieć pewność, że możesz nadpisać style zdefiniowane w innym pliku lub zapisać wymieszać w jednym pliku i użyć ich w innym.

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

Zobacz projekt sass-globbing .

Tworzę plik o nazwie __partials__.scss w tym samym katalogu partials

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

W __partials__.scss napisał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, który chcesz zaimportować i zaimportuj wszystkie pliki w tym pliku w następujący sposób:

Ścieżka do pliku: main / current / _current.scss

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

I w następnym pliku poziomu dir wystarczy użyć import dla pliku, który zaimportował wszystkie pliki z tego dir:

Ścieżka do pliku: main / main.scss

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

W ten sposób masz taką samą liczbę plików, jak importujesz cały katalog. Uważaj na porządek, plik, który przychodzi ostatni zastąpi pasujące stile.

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, niech zaimportuje pozostałe pliki i zaimportuje tylko te najwyższego poziomu. Jeśli wszystkie są samodzielne, to myślę, że będziesz musiał robić to tak, jak teraz.

Możesz chcieć zachować kolejność źródeł wtedy możesz po prostu użyć tego.

@import
  'foo',
  'bar';

Przyjęta odpowiedź Dennisa Besta stwierdza, że " w przeciwnym razie kolejność ładowania jest i powinna być nieistotna... jeśli robimy wszystko właściwie."Jest to po prostu niepoprawne. Jeśli robisz rzeczy poprawnie, korzystasz z kolejności css, aby pomóc ci zmniejszyć specyficzność i utrzymać css prosty i czysty.

To, co robię, aby uporządkować import, to dodanie pliku _all.scss 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 ten:

// 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ę, że struktura plików css powinna być zbyt głęboka.

Chociaż używam tego podejścia, nadal uważam, że import glob powinien istnieć w sass, w sytuacjach, w których porządek nie ma znaczenia, jak katalog mixinów czy nawet animacji.

To może być stare pytanie, ale nadal aktualne w 2020 roku, więc mogę opublikować jakąś aktualizację. Od aktualizacji 19 października generalnie powinniśmy używać @use zamiast @import, ale to tylko uwaga. Rozwiązaniem tego pytania jest użycie plików indeksowych 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

Poszukuję również odpowiedzi na twoje pytanie. Odpowiadaj odpowiedziom poprawna funkcja import all nie istnieje.

Dlatego napisałem skrypt Pythona, który musisz umieścić w katalogu głównym Twojego 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 wykonaniu 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';

Możesz wygenerować plik SASS, który importuje wszystko automatycznie, ja 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 również kontrolować importowanie zamówienia, zamawiając foldery w następujący sposób:

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 działało dobrze dla mnie

@import 'folder/*';

Przy definiowaniu pliku do zaimportowania możliwe jest użycie wszystkich wspólnych definicji folderów.

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

Więcej o funkcji importu w Sass znajdziesz tutaj .