क्या @import का उपयोग करके पूरी निर्देशिका में आयात करना संभव है?

Question

मैं अपनी स्टाइलशीट को SASS के जैसे भाग के साथ संशोधित कर रहा हूं:

@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

वहाँ पूरे partials निर्देशिका (यह SASS-partials से भरा एक निर्देशिका है) @import कम्पास या कुछ और को शामिल करने का एक तरीका है?

Comments

उत्तर नहीं बल्कि उपयोगी: SASS एक आयात में कई फ़ाइलों को आयात कर सकता है, जैसे @import 'partials/header', 'partials/viewport', 'partials/footer';।

— लवबेट

Answer 1

यदि आप Rails प्रोजेक्ट में Sass का उपयोग कर रहे हैं, तो sass-rails gem, https://github.com/rails/sass-rails , ग्लोब आयात करता है।

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

एक अन्य उत्तर में चिंता का जवाब देने के लिए "यदि आप एक निर्देशिका आयात करते हैं, तो आप आयात आदेश कैसे निर्धारित कर सकते हैं? कोई रास्ता नहीं है जो जटिलता के कुछ नए स्तर का परिचय नहीं देता है।"

कुछ का तर्क होगा कि आपकी फ़ाइलों को निर्देशिकाओं में व्यवस्थित करना जटिलता को कम कर सकता है।

मेरे संगठन की परियोजना एक जटिल प्रक्रिया है। 17 निर्देशिकाओं में 119 Sass फाइलें हैं। ये मोटे तौर पर हमारे विचारों से मेल खाते हैं और मुख्य रूप से समायोजन के लिए उपयोग किए जाते हैं, भारी उठाने के साथ हमारे कस्टम ढांचे द्वारा नियंत्रित किया जाता है। मेरे लिए, आयातित निर्देशिकाओं की कुछ पंक्तियाँ आयातित फ़ाइलनामों की 119 पंक्तियों से कम जटिल है।

लोड ऑर्डर को संबोधित करने के लिए, हम उन फ़ाइलों को रखते हैं जिन्हें पहले लोड करने की आवश्यकता होती है - मिक्सिन, वेरिएबल्स इत्यादि - एक शुरुआती-लोडिंग डायरेक्टरी में। अन्यथा, लोड ऑर्डर है और अप्रासंगिक होना चाहिए ... अगर हम चीजों को ठीक से कर रहे हैं।

Comments

या @import "*"यदि आपके नियंत्रक css / scss फ़ाइलें "app / आस्तियों / स्टाइलशीट" फ़ोल्डर में Application.css.scss के साथ एक साथ हैं तो (Application.css.scss में) जोड़ें ।

— मैग्ने

यह "मणि" छोटी गाड़ी है और खिड़कियों पर काम नहीं करती है, इस मुद्दे को देखें जो लंबे समय से खुला है और अनिवार्य रूप से इसका मतलब है कि यह पूरी तरह से टूट गया है github.com/chriseppstein/sass-globbing/issues/3

— pilavbzice

आप क्रिस एप्पस्टीन के सैस-ग्लोबिंग रत्न के बारे में बात कर रहे हैं। मेरा उत्तर सैस-रेल रत्न का उपयोग करता है, जो कि मेरे विचार से अलग है। मैं विंडोज पर नहीं हूं, लेकिन मुझे सैस-रेल रत्न से संबंधित कोई समस्या नहीं दिख रही है।

— डेनिस बेस्ट

यह मेरे लिए काम नहीं किया - अलग-अलग वेनिला css @import की अलग-अलग फ़ाइलों की ग्लोबिंग को तोड़ दिया गया। किस उदासीनता से, देव में काम किया, लेकिन उत्पादन नहीं (जैसा कि आवेदन का केवल एक मूल संपत्ति पथ है। उत्पादन में)

— पीटर एर्लिच

मेरे लिए बहुत अच्छा काम किया, इस टिप के लिए धन्यवाद। मुझे यह देखकर सुखद आश्चर्य हुआ कि Application.scss @import "*"में यह कहना कि एक ही डायरेक्टरी में मौजूद अन्य सभी फाइलें शामिल हैं, लेकिन Application.scss को फिर से शामिल नहीं करता है ... मुझे एक अनंत लूपिंग बग मिलने की उम्मीद थी।

— टॉपहेर हंट

Answer 2

यह फीचर कभी भी सैस का हिस्सा नहीं होगा। एक प्रमुख कारण आयात आदेश है। CSS में, पिछली बार आयात की गई फाइलें पहले बताई गई शैलियों को ओवरराइड कर सकती हैं। यदि आप एक निर्देशिका आयात करते हैं, तो आप आयात आदेश कैसे निर्धारित कर सकते हैं? वहाँ कोई रास्ता नहीं है कि जटिलता के कुछ नए स्तर का परिचय नहीं है। आयातों की सूची रखकर (जैसा कि आपने अपने उदाहरण में किया था), आपको आयात आदेश के साथ स्पष्ट किया जा रहा है। यदि आप किसी अन्य फ़ाइल में परिभाषित शैलियों को ओवरराइड करने में सक्षम होना चाहते हैं या एक फ़ाइल में मिश्रण लिखना चाहते हैं और किसी अन्य में उनका उपयोग करना चाहते हैं तो यह आवश्यक है।

अधिक गहन चर्चा के लिए, इस बंद सुविधा अनुरोध को यहाँ देखें:

Comments

अच्छी तरह से संरचित सीएसएस फ़ाइलों के लिए, समावेशन का आदेश मायने नहीं रखता है

— मिलोवैन ज़ोगोविक

@MilovanZogovic ओवरराइड पर बहुत अधिक निर्भर होने से कोड गंध आती है, लेकिन कैस्केड का उपयोग करने के बारे में कुछ भी अनुचित नहीं है। यह कैसे भाषा डिजाइन किया गया था।

— ब्रैंडन मैथिस

@BrandonMathis मैं यहां सैद्धांतिक शुद्धता को समझता हूं, लेकिन कार्यान्वयन में (मेरा और मेरा मानना ​​है कि आप अपने सीएसएस को इस तरह से लिखना चुन सकते हैं कि विभिन्न फाइलों का एक-दूसरे पर कोई प्रभाव नहीं पड़ता है। मेरे पास फ़ाइलों के साथ "मॉड्यूल" नामक एक निर्देशिका है जिसमें प्रत्येक में एक अलग सीएसएस वर्ग नियम है। मैं चाहता हूं कि उस निर्देशिका की सभी फाइलें शामिल हों, और उनका आदेश नहीं है, और डिजाइन द्वारा कभी भी महत्वपूर्ण नहीं होगा। हर बार जब मैं एक नया जोड़ूं तो सूची को अपडेट करने में दर्द हो रहा है।

— रॉबिन विंसलो

यदि मेरे पास एक निर्देशिका है जो गैर-लागू सीएसएस,% नियमों, कार्यों आदि से भरी हुई है, तो इसमें कोई जोखिम शामिल नहीं है और इसके विपरीत (अनुमति नहीं) सिर्फ बेकार टेडियम और लंबे "आयात हेडर" के बजाय फाइलों में ले जाता है जो सिर्फ एक हो सकता है की एक पंक्ति @import "/functions"या @import "partials/"।

— srcspider

एक usecase मॉड्यूल आयात कर रहा है, जहां ऑर्डर महत्वपूर्ण नहीं है और शैलियों को नाम दिया जा सकता है ... मैं इस फ़ंक्शन को देखना चाहता हूं - हालांकि सहमत हूं कि इसका बुद्धिमानी से उपयोग किया जाना होगा ...

— Hancock

Answer 3

की जाँच करें सास-ग्लोबिंग परियोजना ।

Comments

मेरी टिप्पणी कुछ वर्षों से पुरानी है, लेकिन .... sass-globbing परियोजना में कुछ गंभीर रूप से धीमी प्रगति है, और केवल एक ही डेवलपर है जो विंडोज पर चीजों को बनाने के बारे में अतिवादी नहीं है। हम अभी एक नया शुरू कर रहे हैं जो लिनक्स, मैक और वंडोज़ में काम करता है

— स्टुअर्ट

Answer 4

मैं __partials__.scssउसी की निर्देशिका में नाम से एक फ़ाइल बनाता हूंpartials

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

में __partials__.scss, मैंने ये लिखे:

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

इसलिए, जब मैं संपूर्ण आयात करना चाहता हूं, तो partialsबस लिखें @import "partials"। अगर मैं उनमें से किसी को आयात करना चाहता हूं, तो मैं भी लिख सकता हूं @import "partials/header"।

Comments

यह एक बहुत अच्छा समाधान है। यह कंपास उनके समावेशन को सरल बनाने के लिए क्या करता है +1

— जेथ्रो लार्सन

यह मूल रूप से ओपी सेटअप के समान है। वह @import 'partials/xyz'हर बार एक नया आंशिक बनाया गया बयानों को मैन्युअल रूप से जोड़कर बिना फाइलों को आयात करना चाहेगा ।

— गियो

Downvoters + Upvoters: क्या आप बता सकते हैं कि यह उत्तर ओपी सेटअप से कैसे भिन्न है?

— गयो

वह कुछ भी हल नहीं कर रहा है।

— ऑलिगॉफ्रेन

@gyo यह ओपी की मदद नहीं करता है यदि उनके पास केवल एक निर्देशिका का हिस्सा है, लेकिन यह कई निर्देशिकाओं वाले लोगों की मदद करता है। तो मेरे पास है formsऔर widgetsनिर्देशिका, मैं कर सकते हैं @import "forms"; @import "widgets"एक पेज के लिए मुख्य सीएसएस फ़ाइल, और सभी अलग-अलग partials (के बारे में केवल चिंता में @import forms/text; @import forms/button...) के अंदर forms.scssऔर widgets.scss।

— ttotherat

Answer 5

आप फ़ोल्डर में एक sass फ़ाइल रखकर उस वर्कअराउंड का उपयोग कर सकते हैं जो आप उस फ़ाइल की सभी फ़ाइलों को आयात और आयात करना चाहते हैं:

फ़ाइल पथ: मुख्य / वर्तमान / _current.scss

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

और अगले dir स्तर फ़ाइल में आप फ़ाइल के लिए आयात का उपयोग करते हैं जो उस dir से सभी फ़ाइलों को आयात करता है:

फ़ाइल पथ: मुख्य / main.scss

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

इस तरह से आपके पास समान संख्या में फाइलें हैं, जैसे आप पूरी तरह से आयात कर रहे हैं। ऑर्डर से सावधान रहें, जो फ़ाइल अंतिम बार आती है, वह मिलान स्टाइल्स को ओवरराइड करेगी।

Answer 6

आप स्रोत आदेश को बनाए रखना चाहते हैं तो आप बस इसका उपयोग कर सकते हैं।

@import
  'foo',
  'bar';

यह मेरे लिए ज़्यादा प्रधान है।

Answer 7

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

ऐसा नहीं लगता है।

यदि इन फ़ाइलों में से किसी को हमेशा दूसरों की आवश्यकता होती है, तो क्या उन्होंने अन्य फ़ाइलों को आयात किया है और केवल शीर्ष स्तर के लोगों को आयात करते हैं। यदि वे सभी स्टैंडअलोन हैं, तो मुझे लगता है कि आप इसे ऐसे ही करते रहेंगे, जैसे आप अभी कर रहे हैं।

Comments

हाँ, दस्तावेज़ीकरण देखा, बस जाँच की अगर किसी को एक चाल पता था या उम्मीद है कि यह केवल अनिर्दिष्ट योग्य था। सुझाव के लिए धन्यवाद, हालांकि

— जीर्णशीर्ण

Answer 8

डेनिस बेस्ट द्वारा स्वीकार किए गए उत्तर में कहा गया है कि "अन्यथा, लोड ऑर्डर है और अप्रासंगिक होना चाहिए ... अगर हम ठीक से काम कर रहे हैं।" यह केवल गलत है। यदि आप चीजों को ठीक से कर रहे हैं, तो आप विशिष्टता को कम करने और आपको सीएसएस को सरल और साफ रखने में मदद करने के लिए सीएसएस ऑर्डर का उपयोग करते हैं।

आयात को व्यवस्थित करने के लिए मैं _all.scssएक निर्देशिका में एक फ़ाइल जोड़ रहा हूं, जहां मैं सभी संबंधित फाइलों को सही क्रम में आयात करता हूं। इस तरह, मेरी मुख्य आयात फ़ाइल सरल और साफ होगी, जैसे:

// Import all scss in the project

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

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

आप उप-निर्देशिकाओं के लिए भी ऐसा कर सकते हैं, यदि आपको आवश्यकता है, लेकिन मुझे नहीं लगता कि आपकी सीएसएस फाइलों की संरचना बहुत गहरी होनी चाहिए।

यद्यपि मैं इस दृष्टिकोण का उपयोग करता हूं, फिर भी मुझे लगता है कि एसओएस में ग्लोब आयात मौजूद होना चाहिए, ऐसी परिस्थितियों के लिए जहां ऑर्डर से कोई फर्क नहीं पड़ता है, जैसे मिक्सिंस की निर्देशिका या एनिमेशन भी।

Comments

यदि आप RSCSS जैसे दृष्टिकोण का उपयोग करते हैं, तो विशिष्टता बराबर होती है, और प्रत्येक घटक केवल वहीं लागू होता है जहां उसे बिना किसी विरोध के साथ की आवश्यकता होती है।

— 19WD पर RWDJ

Answer 9

मैं आपके प्रश्न का उत्तर भी खोजता हूं। सभी आयात सही नहीं है जवाब के अनुरूप।

यही कारण है कि मैंने एक अजगर स्क्रिप्ट लिखी है, जिसे आपको अपने scss फ़ोल्डर की जड़ में रखने की आवश्यकता है जैसे:

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

यह तब पेड़ के नीचे से गुजरेगा और सभी स्कैस फाइलों को खोजेगा। एक बार निष्पादित होने के बाद, यह एक scss फाइल बनाएगा, जिसे 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)

आउटपुट फ़ाइल का एक उदाहरण:

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

Answer 10

यह मेरे लिए ठीक रहा

@import 'folder/*';

Comments

मुझे लगता है कि यह माणिक सुविधा की वजह से नहीं है। कुछ कंपाइलरों को इस तरह से समस्या होती है। उदाहरण के लिए मैंने इसे gulp-ruby-sass द्वारा उपयोग किया और इसने काम किया लेकिन gulp-sass का उपयोग करके इसने एक त्रुटि खड़ी कर दी।

— मोर्टेजा ज़िया

Answer 11

आप SASS फ़ाइल उत्पन्न कर सकते हैं जो सब कुछ स्वचालित रूप से आयात करती है, मैं इस घूंघट कार्य का उपयोग करता हूं:

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

आप इस तरह से फ़ोल्डरों को ऑर्डर करके इंपोर्टिंग ऑर्डर को भी नियंत्रित कर सकते हैं:

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
]

Answer 12

यह एक पुराना प्रश्न हो सकता है, लेकिन अभी भी 2020 में प्रासंगिक है, इसलिए मैं कुछ अपडेट पोस्ट कर सकता हूं। Octobers'19 अपडेट के बाद से हम आम तौर पर इसके बजाय @use का उपयोग करना चाहिए @import , लेकिन वह केवल एक टिप्पणी है। इस प्रश्न का समाधान पूरे फ़ोल्डरों को सरल बनाने के लिए तर्जनी का उपयोग है। नीचे उदाहरण है।

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

Comments

मुझे लगता है कि आप @forwardअपने _index.scss के बजाय का उपयोग करना चाहते हैं@use

— इसहाक पाक

Answer 13

आयात करने के लिए फ़ाइल को परिभाषित करने के साथ सभी फ़ोल्डर्स सामान्य परिभाषाओं का उपयोग करना संभव है।

इसलिए, @import "style/*" स्टाइल फ़ोल्डर में सभी फ़ाइलों को संकलित करेंगे।

सास में आयात सुविधा के बारे में अधिक जानकारी आप यहां पा सकते हैं ।