Apakah mungkin mengimpor seluruh direktori dalam sass menggunakan @import?


209

Saya memodulasi stylesheet saya dengan parsial SASS seperti:

@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

apakah ada cara untuk memasukkan seluruh direktori partial (ini adalah direktori yang penuh dengan SASS-partial) seperti @import kompas atau sesuatu?


3
Bukan jawaban tetapi bermanfaat: SASS dapat mengimpor beberapa file dalam satu impor, seperti @import 'partials/header', 'partials/viewport', 'partials/footer';.
llobet

Jawaban:


201

Jika Anda menggunakan Sass dalam proyek Rails, permata sass-rails, https://github.com/rails/sass-rails , fitur glob import.

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

Untuk menjawab kekhawatiran pada jawaban lain, "Jika Anda mengimpor direktori, bagaimana Anda dapat menentukan pesanan impor? Tidak ada cara yang tidak memperkenalkan beberapa tingkat kompleksitas baru."

Beberapa orang akan berpendapat bahwa mengatur file Anda ke dalam direktori dapat MENGURANGI kompleksitas.

Proyek organisasi saya adalah aplikasi yang agak rumit. Ada 119 file Sass dalam 17 direktori. Ini kira-kira sesuai dengan pandangan kami dan terutama digunakan untuk penyesuaian, dengan angkat berat ditangani oleh kerangka kerja kustom kami. Bagi saya, beberapa baris direktori impor sedikit lebih kompleks daripada 119 baris nama file impor.

Untuk mengatasi urutan pemuatan, kami menempatkan file yang perlu memuat pertama - mixin, variabel, dll. - di direktori pemuatan awal. Kalau tidak, muat pesanan adalah dan harus tidak relevan ... jika kita melakukan sesuatu dengan benar.


7
atau tambahkan @import "*"(di application.css.scss) jika file css / scss controller Anda ada di folder "app / assets / stylesheet" bersama dengan application.css.scss.
Magne

"permata" ini buggy dan tidak bekerja di windows, lihat masalah ini yang telah lama terbuka dan pada dasarnya berarti ini benar-benar rusak github.com/chriseppstein/sass-globbing/issues/3
pilavdzice

Anda sedang berbicara tentang permata sass-globbing Chris Eppstein. Jawaban saya menggunakan permata sass-rails, yang menurut saya berbeda. Saya tidak menggunakan Windows, tetapi saya tidak melihat masalah apa pun yang terkait dengan permata sass-rails.
Dennis Best

1
Ini tidak berhasil untuk saya - Globbing dipecah menjadi masing-masing baris vanilla css @import file individual. Yang jahat, bekerja di dev, tetapi bukan produksi (karena hanya ada satu jalur aset root dari aplikasi.css dalam produksi)
Peter Ehrlich

5
Bekerja dengan baik untuk saya, terima kasih atas tip ini. Saya terkejut bahwa mengatakan @import "*"di application.scss termasuk semua file lain yang ada di direktori yang sama tetapi tidak memasukkan kembali application.scss ... Saya berharap untuk mendapatkan bug perulangan yang tak terbatas.
Topher Hunt

94

Fitur ini tidak akan pernah menjadi bagian dari Sass. Salah satu alasan utama adalah pesanan impor. Dalam CSS, file yang diimpor terakhir dapat menimpa gaya yang dinyatakan sebelumnya. Jika Anda mengimpor direktori, bagaimana Anda bisa menentukan pesanan impor? Tidak ada cara yang tidak memperkenalkan tingkat kompleksitas baru. Dengan menyimpan daftar impor (seperti yang Anda lakukan dalam contoh Anda), Anda menjadi eksplisit dengan pesanan impor. Ini sangat penting jika Anda ingin dapat dengan yakin mengesampingkan gaya yang didefinisikan dalam file lain atau menulis mixin dalam satu file dan menggunakannya dalam file lain.

Untuk diskusi yang lebih menyeluruh, lihat permintaan fitur tertutup ini di sini:


260
untuk file css yang terstruktur dengan baik, urutan penyertaan seharusnya tidak menjadi masalah
Milovan Zogovic

57
@MilovanZogovic Mengandalkan berat pada override memiliki bau kode, tetapi tidak ada yang tidak benar tentang menggunakan kaskade. Begitulah bahasa dirancang.
Brandon Mathis

34
@BrandonMathis Saya mengerti kemurnian teoretis di sini, tetapi dalam implementasi (milik saya dan saya anggap berkarat), Anda dapat memilih untuk menulis CSS Anda sedemikian rupa sehingga file-file yang berbeda tidak saling mempengaruhi. Saya memiliki direktori yang disebut "modul" dengan file yang masing-masing berisi aturan kelas css yang berbeda. Saya ingin semua file dalam direktori itu dimasukkan, dan urutannya tidak, dan menurut desain tidak akan pernah, penting. Sangat merepotkan harus memperbarui daftar setiap kali saya menambahkan yang baru.
Robin Winslow

5
Jika saya memiliki direktori yang diisi dengan css yang tidak dapat diterapkan,% aturan, fungsi dll tidak ada risiko yang terlibat dan sebaliknya (tidak memungkinkan) hanya mengarah ke kebosanan yang tidak berguna dan "import header" yang panjang dalam file alih-alih apa yang bisa menjadi satu baris @import "/functions"atau @import "partials/".
srcspider

3
Satu usecase mengimpor modul, di mana pesanan tidak penting dan gaya dapat di-namespace ... Saya ingin melihat fungsi ini - walaupun setuju itu harus digunakan dengan bijak ...
Will Hancock

41

Lihat proyek sass-globbing .


1
komentar saya sudah kedaluwarsa beberapa tahun, tapi .... proyek sass-globbing memiliki beberapa kemajuan yang sangat lambat, dan hanya satu pengembang yang tidak terlalu sibuk membuat hal-hal bekerja pada Windows. Kami baru saja mulai membuat yang baru yang bekerja di Linux, Mac, dan Windows
Stuart

33

Saya membuat file bernama __partials__.scssdi direktori yang samapartials

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

Dalam __partials__.scss, saya menulis ini:

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

Jadi, ketika saya ingin mengimpor keseluruhan partials, tulis saja @import "partials". Jika saya ingin mengimpornya, saya juga bisa menulis @import "partials/header".


2
Itu solusi yang cukup bagus. Itulah yang dilakukan kompas untuk menyederhanakan penyertaan mereka +1
Jethro Larson

8
Ini pada dasarnya sama dengan pengaturan OP. Dia ingin mengimpor file tanpa menambahkan @import 'partials/xyz'pernyataan secara manual setiap kali parsial baru dibuat.
gyo

1
Downvoters + Upvoters: dapatkah Anda menjelaskan bagaimana jawaban ini berbeda dari pengaturan OP?
gyo

4
Itu tidak menyelesaikan apa pun.
oligofren

2
@ gyo Ini tidak membantu OP jika mereka hanya memiliki satu direktori parsial, tetapi membantu orang dengan banyak direktori parsial. Jika saya punya formsdan widgetsdirektori, saya bisa @import "forms"; @import "widgets"di file CSS utama untuk halaman, dan hanya khawatir tentang semua parsial individu ( @import forms/text; @import forms/button...) di dalam forms.scssdan widgets.scss.
ttotherat

4

Anda dapat menggunakan sedikit solusi dengan menempatkan file sass di folder apa yang ingin Anda impor dan impor semua file dalam file seperti ini:

path file: main / current / _current.scss

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

dan pada file level dir berikutnya, Anda hanya menggunakan impor untuk file yang mengimpor semua file dari dir itu:

path file: main / main.scss

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

Dengan begitu Anda memiliki jumlah file yang sama, seperti Anda mengimpor seluruh dir. Waspadalah terhadap urutan, file yang datang terakhir akan menimpa stil yang cocok.


3

Anda mungkin ingin mempertahankan urutan sumber maka Anda bisa menggunakan ini.

@import
  'foo',
  'bar';

Saya lebih memilih ini.


2

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

tidak terlihat seperti itu.

Jika salah satu dari file ini selalu membutuhkan yang lain, minta mereka mengimpor file lain dan hanya mengimpor yang tingkat atas. Jika semuanya berdiri sendiri, maka saya pikir Anda harus tetap melakukannya seperti sekarang.


ya melihat dokumentasi, hanya memeriksa apakah ada yang tahu trik atau berharap itu hanya tidak berdokumen lol. Terima kasih atas sarannya
terkorosi

2

Jawaban yang diterima oleh Dennis Best menyatakan bahwa "Jika tidak, muat pesanan adalah dan harus tidak relevan ... jika kita melakukan sesuatu dengan benar." Ini tidak benar. Jika Anda melakukan hal-hal dengan benar, Anda menggunakan urutan css untuk membantu Anda mengurangi kekhususan dan membuat Anda sederhana dan bersih.

Apa yang saya lakukan untuk mengatur impor adalah menambahkan _all.scssfile di direktori, tempat saya mengimpor semua file yang relevan di dalamnya, dalam urutan yang benar. Dengan cara ini, file impor utama saya akan sederhana dan bersih, seperti ini:

// Import all scss in the project

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

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

Anda dapat melakukan ini untuk sub-direktori juga, jika Anda perlu, tetapi saya tidak berpikir struktur file css Anda harus terlalu dalam.

Meskipun saya menggunakan pendekatan ini, saya masih berpikir impor glob harus ada di sass, untuk situasi di mana pesanan tidak penting, seperti direktori mixin atau bahkan animasi.


Jika Anda menggunakan pendekatan seperti RSCSS, maka spesifisitasnya sama, dan masing-masing komponen hanya berlaku jika perlu tanpa konflik.
RWDJ

1

Saya juga mencari jawaban untuk pertanyaan Anda. Sesuai dengan jawaban impor yang benar semua fungsi tidak ada.

Itulah sebabnya saya telah menulis skrip python yang perlu Anda tempatkan ke root folder scss Anda seperti ini:

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

Kemudian akan berjalan melalui pohon dan menemukan semua file scss. Setelah dieksekusi, itu akan membuat file scss yang disebut 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)

contoh file keluaran:

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

ini bekerja dengan baik untuk saya

@import 'folder/*';

7
Saya pikir ini karena fitur ruby ​​bukan SASS. Beberapa kompiler bermasalah dengan cara ini. Sebagai contoh saya menggunakan ini dengan gulp-ruby-sass dan itu berhasil tetapi menggunakan gulp-sass itu menimbulkan kesalahan.
Morteza Ziyae

0

Anda dapat menghasilkan file SASS yang mengimpor semuanya secara otomatis, saya menggunakan tugas Gulp ini:

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'))
})

Anda juga dapat mengontrol impor pesanan dengan memesan folder seperti ini:

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

Ini mungkin pertanyaan lama, tetapi masih relevan pada tahun 2020, jadi saya mungkin memposting beberapa pembaruan. Sejak pembaruan Octobers'19 kita umumnya harus menggunakan @use bukan @ impor , tapi itu hanya sebuah ucapan. Solusi untuk pertanyaan ini adalah menggunakan file indeks untuk menyederhanakan termasuk seluruh folder. Contoh di bawah ini.

// 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
Saya pikir Anda ingin menggunakan @forward_index.scss Anda alih-alih@use
Isaac Pak

-4

Dengan mendefinisikan file yang akan diimpor dimungkinkan untuk menggunakan semua folder definisi umum.

Jadi, @import "style/*"akan mengkompilasi semua file dalam folder gaya.

Lebih lanjut tentang fitur impor di Sass dapat Anda temukan di sini .

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.