@İmport kullanarak sass içindeki bir dizinin tamamını almak mümkün müdür?

Benim gibi SASS kısmi ile benim stilleri modülerleştiriyorum:

@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

@import pusulası veya başka bir şey gibi tüm kısmi dizini (SASS-kısmi dolu bir dizin) eklemenin bir yolu var mı?

Sass'ı bir Rails projesinde kullanıyorsanız, sass-rails gem, https://github.com/rails/sass-rails , glob içe aktarma özelliğine sahiptir.

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

"Bir dizini içe aktarırsanız, içe aktarma sırasını nasıl belirleyebilirsiniz? Yeni bir karmaşıklık düzeyi getirmeyen bir yol yoktur."

Bazıları dosyalarınızı dizinler halinde düzenlemenin karmaşıklığı azaltabileceğini iddia eder.

Kuruluşumun projesi oldukça karmaşık bir uygulama. 17 dizinde 119 Sass dosyası var. Bunlar kabaca görüşlerimize karşılık gelir ve ağırlıklı olarak ayarlamalar için kullanılır, ağır kaldırma özel çerçevemiz tarafından ele alınır. Bana göre, birkaç içe aktarılan dizin satırı, 119 satırlık ithal dosya adından biraz daha az karmaşıktır.

Yükleme sırasını ele almak için, önce yüklenmesi gereken dosyaları (mixins, değişkenler, vb.) Erken yükleme dizinine yerleştiriyoruz. Aksi takdirde, yük emri önemsizdir ve önemsiz olmalıdır ... eğer işleri düzgün yapıyoruz.

Bu özellik asla Sass'ın bir parçası olmayacak. Bunun önemli nedenlerinden biri ithalat siparişidir. CSS'de, en son içe aktarılan dosyalar daha önce belirtilen stilleri geçersiz kılabilir. Bir dizini içe aktarırsanız, içe aktarma sırasını nasıl belirleyebilirsiniz? Yeni bir karmaşıklık düzeyi getirmeyen bir yol yoktur. İçe aktarmaların bir listesini tutarak (örneğin örnekte olduğu gibi), içe aktarma siparişi ile açıksınız. Başka bir dosyada tanımlanan stilleri güvenle geçersiz kılmak veya bir dosyada mixins yazmak ve bunları başka bir dosyada kullanmak istiyorsanız bu önemlidir.

Daha ayrıntılı bir tartışma için bu kapalı özellik isteğine buradan bakın:

Sass-globbing projesine göz atın .

__partials__.scssAynı dizinde adlı bir dosya oluşturuyorumpartials

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

İçinde __partials__.scssşunu yazdım:

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

Yani, bütün ithal etmek istediğimde partials, sadece yaz @import "partials". Bunlardan herhangi birini içe aktarmak istersem de yazabilirim @import "partials/header".

Bir sass dosyasını bu dosyadaki tüm dosyaları almak ve almak istediğiniz klasöre yerleştirerek biraz geçici bir çözüm kullanabilirsiniz:

dosya yolu: ana / akım / _current.scss

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

ve bir sonraki dir düzeyindeki dosyada, o dizindeki tüm dosyaları içe aktaran dosya için import komutunu kullanabilirsiniz:

dosya yolu: main / main.scss

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

Bu şekilde, tüm dizini içe aktardığınız gibi aynı sayıda dosyanız olur. Siparişe dikkat edin, en son gelen dosya eşleşen stilleri geçersiz kılar.

Kaynak sırasını korumak isteyebilirsiniz, o zaman bunu kullanabilirsiniz.

@import
  'foo',
  'bar';

Bunu tercih ederim.

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

öyle görünmüyor.

Bu dosyalardan herhangi biri her zaman başkalarını gerektirirse, diğer dosyaları içe aktarmalarını ve yalnızca en üst düzey dosyaları almalarını sağlayın. Eğer hepsi bağımsızlarsa, sanırım şimdi olduğu gibi yapmaya devam etmeniz gerekecek.

Dennis Best'in kabul ettiği cevap, "Aksi takdirde yük emrinin önemsiz olduğunu ve olması gerektiğini ... bir şeyleri doğru bir şekilde yapıyorsak" diyor. Bu sadece yanlış. İşleri düzgün bir şekilde yapıyorsanız, özgüllüğü azaltmanıza ve css'i basit ve temiz tutmanıza yardımcı olmak için css sırasını kullanırsınız.

_all.scssİçe aktarma işlemlerini düzenlemek için yaptığım, dizindeki tüm dosyaları doğru sırada içe aktardığım bir dizine dosya eklemek . Bu şekilde, ana içe aktarma dosyam aşağıdaki gibi basit ve temiz olacaktır:

// Import all scss in the project

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

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

Gerekirse, alt dizinler için de bunu yapabilirsiniz, ancak css dosyalarınızın yapısının çok derin olması gerektiğini düşünmüyorum.

Bu yaklaşımı kullanmama rağmen, hala bir karışım ithalatı var, sanırım bir karışıklık dizini veya hatta animasyonlar dizini gibi, siparişin önemli olmadığı durumlar için sass'ta var olmalı.

Ayrıca sorunuzun yanıtını da arıyorum. Yanıtlara karşılık gelen doğru içeri aktarma işlevi yok.

Bu yüzden scss klasörünüzün köküne böyle yerleştirmeniz gereken bir python betiği yazdım:

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

Daha sonra ağaçta yürüyecek ve tüm scss dosyalarını bulacaktır. Bir kez yürütüldüğünde, main.scss adlı bir scss dosyası oluşturur

#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)

bir çıktı dosyası örneği:

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

bu benim için iyi çalıştı

@import 'folder/*';

Her şeyi otomatik olarak alan SASS dosyası oluşturabilirsiniz, bu Gulp görevini kullanıyorum:

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

İçe aktarma sırasını aşağıdaki gibi klasörleri sipariş ederek de kontrol edebilirsiniz:

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
]

Eski bir soru olabilir, ancak 2020'de hala alakalı, bu yüzden bazı güncelleme gönderebilirim. Octobers'19 güncellemesinden bu yana genellikle @import yerine @ kullanmalıyız , ancak bu sadece bir açıklama. Bu sorunun çözümü, tüm klasörleri dahil etmeyi basitleştirmek için dizin dosyalarını kullanmaktır. Aşağıdaki örnek.

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

İçe aktarılacak dosyayı tanımlayarak, tüm klasörlerin ortak tanımlarını kullanmak mümkündür.

Böylece, @import "style/*"stil klasöründeki tüm dosyaları derleyecektir.

Sass'ta içe aktarma özelliği hakkında daha fazla bilgiyi burada bulabilirsiniz .