एसएएसएस और ज़र्ब फाउंडेशन - भ्रमित स्थापना निर्देश

Question

मैंने फाउंडेशन 4 के सैस संस्करण का उपयोग करने का निर्णय लिया क्योंकि सीएसएस एक कुशलतापूर्वक संपादित करने के लिए लगभग असंभव है।

मैं यहां दिए गए निर्देशों का पालन किया: http://foundation.zurb.com/docs/sass.html

ये मणि (कोई समस्या नहीं) स्थापित करने के लिए तो कम्पास स्थापित मुझे सलाह दी तो एक परियोजना है, जो मैं wwwroot में किया था पैदा करते हैं।

अब तक सभी अच्छे हैं। इसके बाद मुझे सलाह दी जाती है कि "गिटूब से फाइलें डाउनलोड करें (एसएसएस/और जेएस/निर्देशिकाएं लें) और उन्हें अपनी प्रोजेक्ट निर्देशिका में रखें"

अब साइकिल पर मछली के नाम पर निर्देश क्यों होंगे मुझे ऐसा करने की सलाह दें जब कमांड लाइन पर पिछले चरण (कंपास create -r zurb-foundation --using नींव) मेरे प्रोजेक्ट के लिए रूट निर्देशिका में पहले से ही एक फ़ोल्डर बनाता है - यद्यपि अलग-अलग नाम दिया गया है - जिसमें समान फाइलें समान नहीं हैं? "नींव" और "विक्रेता" उपफोल्डर्स के साथ पहले से ही "जावास्क्रिप्ट" फ़ोल्डर है जिसमें काफी हद तक एक ही फाइलें हैं - हालांकि कुछ अलग-अलग आकार हैं।

क्या मुझे कुछ याद आ रही है? शामिल "index.html" फ़ाइल "जावास्क्रिप्ट" फ़ोल्डर का संदर्भ देती है तो मेरा मतलब जिथब से "जेएस" क्यों शामिल है? जब आप तकनीक के लिए नए हों तो यह बहुत भ्रमित है!

स्थापना निर्देशों का पालन करने के बाद अब मेरे पास "foundation.scss" और "app.scss" फ़ाइलें हैं जो काफी हद तक एक जैसी हैं (app.scss) ने बहुत टिप्पणी की है। मेरा उपयोग करने के लिए कौन सा मतलब है?

ऐसा लगता है कि निर्देश मूल रूप से पुराने हैं। ऐसा लगता है कि मुझे जिथब से "जेएस" की आवश्यकता नहीं है लेकिन मुझे "एसएसएस" की आवश्यकता है। इस स्कैस फ़ोल्डर की सामग्री इस तरह दिखती है कि जब उन्हें प्रोजेक्ट बनाया जाता है तो "sass" फ़ोल्डर में जाने की आवश्यकता होती है और "setup.scss" फ़ाइल को "app.scss" के रूप में हटाया जा सकता है, इसकी एक प्रति है।

मुझे नहीं पता कि आधार "app.scss" फ़ाइल "@import नींव" की उम्मीद कर रही है क्योंकि परियोजना के निर्माण/निर्माण पर कोई "नींव" फ़ोल्डर नहीं बनाया गया है। शायद मुझे कुछ याद आ रहा है लेकिन यह सब बहुत भ्रमित है। क्या कोई यह स्पष्ट कर सकता है कि मुझे किस चीज से शुरुआत करने की आवश्यकता है और मैं क्या हटा सकता/अनदेखा कर सकता हूं?

Answer 1

जब आप gem इंस्टॉल करते हैं, तो सभी उचित फाउंडेशन फ़ाइलें आपके लिए मणि कैश में स्थापित की जाती हैं। कम्पास foundation.scss से @import निर्देश के माध्यम से सभी F4 SCSS फ़ाइलों को आपके प्रोजेक्ट में खींच देगा।

गीथब रेपो में प्रोजेक्ट डॉक्स नवीनतम F4 प्रोजेक्ट बनाने के लिए नवीनतम कम्पास निर्देश दिखाते हैं। https://github.com/zurb/foundation/blob/master/docs/sass.html.erb

ऐसा लगता है कि आप कम्पास लोगों में स्टैंडअलोन निर्देश मिश्रण कर रहे हैं।

तो आपके द्वारा चलाए गए इस:

[sudo] gem install compass 
cd path/to/where-you-want-your-project 
run compass create <project-name> -r zurb-foundation --using foundation 

आप Github या स्टैंडअलोन निर्देश की जरूरत नहीं है।

नीचे दिए गए चरणों में एक F4 प्रोजेक्ट बनाने के मैन्युअल चरणों की रूपरेखा है। मुझे लगता है कि आप STEP 4 पर फंस गए हैं, इसलिए उस भाग पर ध्यान केंद्रित करें।

कदम 1:

इन दोनों अभिलेखागार आसान पहुँच के लिए डाउनलोड:

फाउंडेशन वेनिला:

http://foundation.zurb.com/files/foundation-4.1.6.zip

फाउंडेशन मास्टर:

कदम 2::

/config.rb

require 'zurb-foundation' 
http_path = "/" 
css_dir = "css" 
sass_dir = "scss" 
images_dir = "img" 
javascripts_dir = "js" 
output_style = :expanded 
relative_assets = true 
line_comments = true 

:

इस फ़ाइल बनाएँ

https://github.com/zurb/foundation/archive/master.zip

अपने www रूट निर्देशिका में उत्पादन (लाइव होने पर) output_style = :compact or :compressed और line_comments = false स्विच करें।

कदम 3:

• कॉपी/अपने जड़ www निर्देशिका में फाउंडेशन वेनिला से index.html ले जाएँ।
• line 11 संपादित करें और शैली टैग में foundation.css से app.css बदलें।

चरण 4:

इस निर्देशिका और फ़ाइल बनाएँ:

/एससीएसएस/

• app.scss बनाएँ - यह आपकी साइट/एप्लिकेशन स्टाइलशीट है और हम ' इसमें सामान्यीकृत और एफ 4 आयात करेंगे।

• इसे में इस कॉपी:

  // Global Foundation Settings 
  // @import "settings"; 
  
  // Comment out this import if you don't want to use normalize 
  @import "normalize"; 
  
  // Comment out this import if you are customizing you imports below 
  @import "foundation"; 
  
  // Your own SCSS here... 
  

अगर आप चाहते हैं ओवरराइड कुछ F4 सास चर करने के लिए आप _settings.scss फ़ाइल की आवश्यकता होगी। अभी के लिए मैं इस कदम को छोड़ दूंगा और इसे तब तक छोड़ दूंगा जब तक कि आप F4 से अधिक परिचित न हों।

कदम 5:

इस निर्देशिका (फ़ाइलें स्वचालित रूप से यहाँ लिखा) बनाएँ:

/सीएसएस/

• app.css - कम्पास द्वारा /scss/app.scss से यहाँ लिखा जाएगा। सामान्यीकृत करें और सभी एफ 4 सीएसएस इसके अंदर होंगे, साथ ही आपके द्वारा जोड़े गए किसी भी सीएसएस को भी जोड़ा जाएगा।

यह स्वचालित रूप से होता है, आप को छोड़कर स्थापित आवश्यक जवाहरात और कदम 2 से अपने कम्पास कॉन्फ़िग फ़ाइल है कुछ करने की ज़रूरत नहीं है।

कदम 6:

इस निर्देशिका और कॉपी बनाए/इसे में इन फ़ाइलों को स्थानांतरित:

/js/

• कॉपी/फाउंडेशन वेनिला से /js/foundation.min.js ले जाएँ यहां डाउनलोड करें।

• यदि आपको अपने app.js की आवश्यकता है तो इसे यहां बनाएं/रखें और इसे फ़ूटर में अंतिम बार लिंक करें।

/js/विक्रेता/

• कॉपी/यहाँ में फाउंडेशन वेनिला डाउनलोड से /js/vendor/custom.modernizr.js ले जाएँ।

• कॉपी/फाउंडेशन वेनिला डाउनलोड यहाँ से /js/vendor/zepto.js और /js/vendor/jquery.js ले जाएँ।

बाद में, जब आप और अधिक सहज महसूस करते हैं, तो आप चेरी व्यक्ति फाउंडेशन जे एस फ़ाइलें फाउंडेशन मास्टर से ले सकते हैं और उन्हें यहाँ एक छोटे lib में श्रेणीबद्ध foundation.min.js के रूप में कर सकते हैं।

ऐसा करना चाहिए।

मेरी www रेपो में इस फ़ाइल को चेक आउट, यह एक काम कर F4 सेटअप से पता चलता है: https://github.com/jhauraw/jhaurawachsman.com/blob/master/_layouts/default.html

तुम भी कैसे एससीएसएस के स्वचालित निर्माण के लिए Grunt.js को एकीकृत करने के लिए वहाँ के आसपास प्रहार कर सकते हैं और जेएस concatenation और minification के साथ: https://github.com/jhauraw/jhaurawachsman.com/blob/master/Gruntfile.js

Answer 2

@ jhauraw के रूप में उपयुक्त होने के बिना, मैंने कुछ और देखा।

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