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


209

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?


3
Nie odpowiedź, ale przydatna: SASS może importować wiele plików podczas jednego importu, na przykład @import 'partials/header', 'partials/viewport', 'partials/footer';.
llobet

Odpowiedzi:


201

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.


7
lub dodaj @import "*"(w application.css.scss), jeśli pliki css / scss kontrolera znajdują się w folderze „app / asset / stylesheets” razem z application.css.scss.
Magne

ten „klejnot” jest wadliwy i nie działa w systemie Windows, zobacz ten problem, który był otwarty od dawna i zasadniczo oznacza, że ​​jest całkowicie zepsuty github.com/chriseppstein/sass-globbing/issues/3
pilavdzice

Mówisz o perełce Chrisa Eppsteina. Moja odpowiedź wykorzystuje klejnot Sass-Rails, który moim zdaniem jest inny. Nie korzystam z systemu Windows, ale nie widzę żadnych problemów związanych z klejnotem Sass-Rails.
Dennis Best,

1
Nie działało to dla mnie - globbing został podzielony na poszczególne waniliowe css @import wierszy poszczególnych plików. Które paskudnie działało w deweloperach, ale nie w produkcji (ponieważ jest tylko jedna główna ścieżka do pliku application.css w produkcji)
Peter Ehrlich

5
Działa świetnie dla mnie, dzięki za tę wskazówkę. Jestem mile zaskoczony, że powiedzenie @import "*"w application.scss obejmuje wszystkie inne pliki znajdujące się w tym samym katalogu, ale nie dołącza ponownie application.scss ... Spodziewałem się, że dostanę nieskończonego błędu zapętlenia.
Topher Hunt

94

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:


260
w przypadku dobrze skonstruowanych plików css kolejność dołączania nie powinna mieć znaczenia
Milovan Zogovic

57
@MilovanZogovic Poleganie na przesłonięciach ma zapach kodu, ale nie ma nic niewłaściwego w korzystaniu z kaskady. Tak zaprojektowano język.
Brandon Mathis,

34
@BrandonMathis Rozumiem tutaj teoretyczną czystość, ale w implementacji (moja i zakładam, że jest skorodowana) możesz napisać swój CSS w taki sposób, aby różne pliki nie miały na siebie wpływu. Mam katalog o nazwie „moduły” z plikami, z których każdy zawiera inną regułę klasy css. Chcę, aby wszystkie pliki w tym katalogu zostały uwzględnione, a ich kolejność nie jest, a z założenia nigdy nie będzie ważna. Uciążliwa jest aktualizacja listy za każdym razem, gdy dodam nową.
Robin Winslow

5
Jeśli mam katalog, który jest wypełniony niestosownymi css,% regułami, funkcjami itp., Nie ma żadnego ryzyka, a odwrotne (nie zezwalanie) po prostu prowadzi do bezużytecznego nudy i długich „nagłówków importu” w plikach zamiast czegoś, co może być po prostu pojedyncza linia @import "/functions"lub @import "partials/".
srcspider

3
Jednym z przykładów jest importowanie modułów, w których kolejność nie jest ważna, a style mogą mieć przestrzeń nazw ... Chciałbym zobaczyć tę funkcję - choć zgadzam się, że trzeba ją mądrze wykorzystać ...
Czy Hancock

41

Sprawdź projekt sass-globbing .


1
mój komentarz jest nieaktualny o kilka lat, ale .... projekt sass-globbing ma bardzo powolne postępy i tylko jeden programista nie jest zbytnio zmartwiony sprawianiem, że wszystko działa w systemie Windows. Właśnie zaczynamy tworzyć nowy, który działa w systemach Linux, Mac i Windows
Stuart

33

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".


2
To całkiem dobre rozwiązanie. To właśnie robi kompas, aby uprościć ich włączenie +1
Jethro Larson

8
Jest to w zasadzie to samo co konfiguracja OP. Chciałby zaimportować pliki bez ręcznego dodawania @import 'partials/xyz'instrukcji za każdym razem, gdy tworzona jest nowa część.
gyo

1
Downvoters + Upvoters: czy możesz wyjaśnić, w jaki sposób ta odpowiedź różni się od konfiguracji OP?
gyo

4
To niczego nie rozwiązuje.
oligofren

2
@gyo Nie pomaga OP, jeśli mają tylko jeden katalog części, ale pomaga ludziom z wieloma katalogami części. Jeśli mam formsi widgetskatalogi, mogę @import "forms"; @import "widgets"w głównym pliku CSS strony, i martwię się tylko o wszystkie poszczególne części ( @import forms/text; @import forms/button...) wewnątrz forms.scssi widgets.scss.
ttotherat

4

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.


3

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

@import
  'foo',
  'bar';

Wolę to.


2

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.


tak, widziałem dokumentację, sprawdziłem tylko, czy ktoś znał sztuczkę, lub mając nadzieję, że to tylko nieudokumentowane lol. Dzięki za sugestię
skorodował

2

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.


Jeśli zastosujesz podejście takie jak RSCSS, wówczas specyficzność jest równa, a każdy składnik ma zastosowanie tylko tam, gdzie jest to konieczne, bez konfliktów.
RWDJ

1

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

0

to działało dobrze dla mnie

@import 'folder/*';

7
Myślę, że dzieje się tak z powodu ruby, a nie SASS. Niektóre kompilatory mają z tym problem. Na przykład użyłem tego przez gulp-ruby-sass i zadziałało, ale użycie gulp-sassa spowodowało błąd.
Morteza Ziyae

0

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
]

0

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


1
Myślę, że chcesz użyć @forwardw swoim _index.scss zamiast@use
Isaac Pak

-4

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 .

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.