फाउंडेशन 6 किसी भी शैली

Question

उत्पन्न नहीं करता है मैं सेटअप Gulp और सास का उपयोग कर फाउंडेशन 6 परीक्षण करने के लिए एक नई परियोजना है, लेकिन यह बिल्कुल भी संकलित करने के लिए प्रतीत नहीं होता। एक और पोस्ट इस विषय के करीब है, लेकिन मैं व्यक्तिगत रूप से मानना ​​है कि स्वीकार किए जाते हैं जवाब सही समाधान नहीं है - के रूप में यह सभी घटकों को भी शामिल है और वास्तव में क्या Zurb पता चलता है के विपरीत (इस मुद्दे देखें: https://github.com/zurb/foundation-sites/issues/7537) है। वैसे भी ...

मैं बोवर से फाउंडेशन 6.1.1 स्थापित है, और इसलिए की तरह gulpfile.js में मेरी gulp-sass समारोह के लिए पथ कहा:

// Compile Our Sass 
gulp.task('sass', function() { 
    return gulp.src('scss/theme.scss') 
     .pipe(sass({ includePaths : ['bower_components/foundation-sites/scss'], outputStyle: 'expanded'}).on('error', sass.logError)) 
     .pipe(gulp.dest('css/')) 
}); 

मेरे theme.scss इस प्रकार है:

//vendor file 
@import '../bower_components/foundation-sites/scss/settings/settings'; 
@import '../bower_components/foundation-sites/scss/foundation'; 

body{ 
    background: red; 
} 

मेरे स्कैस को संकलित करते समय मुझे कोई त्रुटि नहीं मिलती है, लेकिन theme.css का आउटपुट इस तरह दिखता है:

/** 
* Foundation for Sites by ZURB 
* Version 6.1.1 
* foundation.zurb.com 
* Licensed under MIT Open Source 
*/ 
body { 
    background: red; 
} 

तो ऐसा लगता है कि यह टिप्पणी आउटपुट होने के बाद से फ़ाइल को मार रही है लेकिन यह foundation.scss में किसी भी सैस आयात को संकलित नहीं कर रही है।

Answer 1

इस फाउंडेशन 6 @import foundation में हो रहा है, क्योंकि केवल अपने एससीएसएस में उपयोग के लिए फाउंडेशन mixins आयात करता है। यह सेटअप इस तरह से इतना है कि आप एक घटक के फाउंडेशन mixins का उपयोग करें और यह भी कहा कि घटक के लिए शेयर सीएसएस वर्गों जोड़कर अपने सीएसएस ब्लोट नहीं कर सकता है।

@import 'settings'; 
@import 'foundation'; 
@import 'motion-ui'; 

@include foundation-everything; 

@include motion-ui-transitions; 
@include motion-ui-animations; 

घटकों आप की जरूरत के लिए केवल व्यक्तिगत सीएसएस वर्गों आयात करने के लिए:

फाउंडेशन सीएसएस वर्गों आप (आपके मामले में theme.scss) अपने मुख्य app.scss फ़ाइल सेटअप कर सकते हैं इस के समान के सभी आयात करने के लिए सेटअप अपने app.scss फ़ाइल (आपके मामले में theme.scss) नीचे की तरह है, और बाहर टिप्पणी घटकों आप प्रयोग नहीं करते।

@import 'settings'; 
@import 'foundation'; 
@import 'motion-ui'; 

@include foundation-global-styles; // Always include the global-styles 
@include foundation-grid; 
@include foundation-typography; 
@include foundation-button; 
@include foundation-forms; 
@include foundation-visibility-classes; 
@include foundation-float-classes; 
@include foundation-accordion; 
@include foundation-accordion-menu; 
@include foundation-badge; 
@include foundation-breadcrumbs; 
@include foundation-button-group; 
@include foundation-callout; 
@include foundation-close-button; 
@include foundation-drilldown-menu; 
@include foundation-dropdown; 
@include foundation-dropdown-menu; 
@include foundation-flex-video; 
@include foundation-label; 
@include foundation-media-object; 
@include foundation-menu; 
@include foundation-off-canvas; 
@include foundation-orbit; 
@include foundation-pagination; 
@include foundation-progress-bar; 
@include foundation-slider; 
@include foundation-sticky; 
@include foundation-reveal; 
@include foundation-switch; 
@include foundation-table; 
@include foundation-tabs; 
@include foundation-thumbnail; 
@include foundation-title-bar; 
@include foundation-tooltip; 
@include foundation-top-bar; 

@include motion-ui-transitions; 
@include motion-ui-animations; 

तुम भी bower_components/foundation-sites/scss/settings/ से _settings.scss फाइल कॉपी और अपने प्रोजेक्ट की scss निर्देशिका में यह जगह चाहते हैं।

अंत में, सुनिश्चित करें कि आप अपने gulpfile.js में सास कार्य में इन दो रास्तों में शामिल हैं:

• bower_components/foundation-sites/scss
• bower_components/motion-ui/src/

Answer 2

मेरे जैसे सच Zurb newbies के लिए, यहाँ जवाब मैं था है की तलाश में (और सिर्फ खोजने की कोशिश कर बर्बाद हो घंटे)।

जब आप फाउंडेशन 6 स्थापित करते हैं, तो आपको एक एससीएसएस फ़ाइल के साथ कुछ इस तरह शुरू से अंत:

// Dependencies 
@import '../_vendor/normalize-scss/sass/normalize'; 
@import '../_vendor/sassy-lists/stylesheets/helpers/missing-dependencies'; 
@import '../_vendor/sassy-lists/stylesheets/helpers/true'; 
@import '../_vendor/sassy-lists/stylesheets/functions/purge'; 
@import '../_vendor/sassy-lists/stylesheets/functions/remove'; 
@import '../_vendor/sassy-lists/stylesheets/functions/replace'; 
@import '../_vendor/sassy-lists/stylesheets/functions/to-list'; 

// Settings 
// import your own `settings` here or 
// import and modify the default settings through 
@import 'settings/settings'; 

यह चर पैदा करते हैं और मिश्रण-इन करने के लिए एससीएसएस फ़ाइलों में कोड चलाता है।यहाँ एक चर का एक उदाहरण है:

$dropdown-padding: 1rem !default; 

यहाँ एक मिश्रण में का एक उदाहरण है:

@mixin foundation-typography { 
    @include foundation-typography-base; 
    @include foundation-typography-helpers; 
    @include foundation-text-alignment; 
    @include foundation-print-styles; 
} 

सीएसएस में इस संकलन ठीक कुछ भी नहीं उत्पन्न होगा। आपके पास वेरिएबल्स का एक सेट होगा जिसका आप उपयोग कर सकते हैं, और मिश्रण-इन्स (फ़ंक्शंस, मूल रूप से) का एक सेट जिसे आप कॉल कर सकते हैं, लेकिन जब तक आप ऐसा नहीं करते हैं तो आप कोई सीएसएस उत्पन्न नहीं करेंगे। ,

// Settings 
// import your own `settings` here or 
// import and modify the default settings through 
@import 'settings/settings'; 

हालांकि, अगर आप अभी भी कुछ नहीं मिलेगा यह सब करता है अपने चर (इसलिए की स्थापना फ़ॉन्ट, रंग, spacings के लिए डिफ़ॉल्ट मान सेट करने के लिए है, क्योंकि: तो अगली बात तुम कर सकते हो इस पंक्ति में वापस टिप्पणी है , आदि)। आपको क्या करने की जरूरत है एक नया एससीएसएस फ़ाइल बनाने के लिए है कुछ इस तरह शुरू करने के लिए (यह test.scss कॉल):

@import 'foundation'; 

@include foundation-global-styles; 
@include foundation-xy-grid-classes; 

पहली पंक्ति फ़ाइल जो अन्य एससीएसएस फ़ाइलों के सभी का संदर्भ भी शामिल है।

आप Zurb site here पर शामिल करने के लिए संभावित चीज़ों की एक सूची प्राप्त कर सकते हैं। यह क्या कर रहा है मिश्रण मिश्रण की एक श्रृंखला चल रहा है। यहाँ "नींव-वैश्विक शैलियों" कहा जाता है एक, उदाहरण के लिए, जो आप global.scss फ़ाइल में पा सकते हैं की शुरुआत है:

@mixin foundation-global-styles { 
    @include -zf-normalize; 

    // These styles are applied to a <meta> tag, which is read by the Foundation JavaScript 
    .foundation-mq { 
    font-family: '#{-zf-bp-serialize($breakpoints)}'; 
    } 

यह इन मिश्रण-इन जो सीएसएस उत्पन्न है। यह सब शायद सभी के लिए स्पष्ट था, लेकिन यह मेरे लिए नहीं था!