Apakah mungkin mengimpor seluruh direktori dalam sass menggunakan @import?

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?

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.

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:

Lihat proyek sass-globbing .

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

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.

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

@import
  'foo',
  'bar';

Saya lebih memilih ini.

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.

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.

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

ini bekerja dengan baik untuk saya

@import 'folder/*';

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
]

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

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 .