रेल में उचित SCSS एसेट संरचना

Question

इसलिए, मेरे पास एक app/assets/stylesheets/निर्देशिका संरचना है जो कुछ इस तरह दिखती है:

   |-dialogs
   |-mixins
   |---buttons
   |---gradients
   |---vendor_support
   |---widgets
   |-pages
   |-structure
   |-ui_elements

प्रत्येक निर्देशिका में, कई sass partials (आमतौर पर * .css.scss, लेकिन एक या दो * .css.scss.erb) होती हैं।

मैं एक बहुत कुछ मान सकता है, लेकिन *= require_tree .आवेदन के कारण उन निर्देशिकाओं में स्वचालित रूप से सभी फाइलों को संकलित करना चाहिए , सही है?

मैंने हाल ही में सभी फ़ाइलों को हटाकर और रूट app/assets/stylesheetsफ़ोल्डर (_colors.css.scss) में एक फ़ाइल में रखकर इन फाइलों को पुनर्गठन करने की कोशिश की है । मैंने तब app/assets/stylesheetsमास्टर के नाम से रूट फ़ोल्डर में एक फ़ाइल बनाई। इस प्रकार जो दिखता है:

// Color Palette 
@import "colors";

// Mixins
@import "mixins/buttons/standard_button";
@import "mixins/gradients/table_header_fade";
@import "mixins/vendor_support/rounded_corners";
@import "mixins/vendor_support/rounded_corners_top";
@import "mixins/vendor_support/box_shadow";
@import "mixins/vendor_support/opacity";

मुझे वास्तव में समझ में नहीं आता है कि रेल संपत्ति संकलन के क्रम को कैसे संभालती है, लेकिन यह स्पष्ट रूप से मेरे पक्ष में नहीं है। ऐसा प्रतीत होता है कि फाइलों में से कोई भी महसूस नहीं करता है कि उनके पास कोई चर या मिश्रण आयात किया जा रहा है, और इसलिए यह त्रुटियों को फेंकता है और मैं संकलन नहीं कर सकता।

Undefined variable: "$dialog_divider_color".
  (in /home/blah/app/assets/stylesheets/dialogs/dialog.css.scss.erb)

Undefined mixin 'rounded_corners'.
  (in /home/blah/app/assets/stylesheets/widgets.css.scss)

चर $dialog_divider_colorस्पष्ट रूप से _colors.css.scss में परिभाषित किया गया है, और _master.css.scssरंग और मेरे सभी मिश्रणों का आयात कर रहा है। लेकिन स्पष्ट रूप से रेल को वह मेमो नहीं मिला।

क्या कोई रास्ता है जिससे मैं इन त्रुटियों को ठीक कर सकता हूं, या क्या मुझे अपनी सभी परिवर्तनीय परिभाषाओं को वापस प्रत्येक व्यक्तिगत फ़ाइल में, साथ ही साथ सभी मिक्सिन आयातों का सहारा लेने की आवश्यकता होगी?

दुर्भाग्य से, यह लड़का लगता है कि यह संभव नहीं लगता है, लेकिन मुझे उम्मीद है कि वह गलत है। किसी भी विचार की बहुत सराहना की जाती है।

Answer 1

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

एक उदाहरण के रूप में, आपको बताता है कि आपके पास सभी सामान्य विभिन्न ब्राउज़र कार्यान्वयनों के बजाय एक डिफ़ॉल्ट रूप पाने के लिए एक normalize.css शीट है। यह ब्राउज़र लोड करने वाली पहली फाइल होनी चाहिए। यदि आप इस शीट को अपने सीएसएस आयात में कहीं बेतरतीब ढंग से शामिल करते हैं, तो यह न केवल ब्राउज़र डिफ़ॉल्ट शैलियों को ओवरराइड करेगा, बल्कि सभी सीएसएस फाइलों में परिभाषित कोई भी शैली जो इससे पहले लोड की गई थी। यह चर और मिश्रण के लिए समान है।

Euruko2012 में रॉय टोमिज द्वारा एक प्रस्तुति को देखने के बाद मैंने निम्नलिखित दृष्टिकोण के लिए निर्णय लिया कि यदि आपके पास प्रबंधन करने के लिए बहुत सीएसएस है।

मैं आमतौर पर इस दृष्टिकोण का उपयोग करता हूं:

1. सभी मौजूदा .css फ़ाइलों को .scss में बदलें
2. Application.scss से सभी सामग्री निकालें

इसमें @import निर्देश जोड़ना शुरू करें application.scss।

यदि आप ट्विटर्स बूटस्ट्रैप और अपनी खुद की कुछ सीएसएस शीट का उपयोग कर रहे हैं, तो आपको पहले बूटस्ट्रैप आयात करना होगा, क्योंकि इसमें शैलियों को रीसेट करने के लिए एक शीट है। इसलिए आप @import "bootstrap/bootstrap.scss";अपने में जोड़ें application.scss।

Bootstrap.scss फ़ाइल इस प्रकार है:

// CSS Reset
@import "reset.scss";

// Core
@import "variables.scss";
@import "mixins.scss";

// Grid system and page structure
@import "scaffolding.scss";

// Styled patterns and elements
@import "type.scss";
@import "forms.scss";
@import "tables.scss";
@import "patterns.scss";

और आपकी application.scssफ़ाइल जैसी दिखती है:

@import "bootstrap/bootstrap.scss";

आयात के आदेश के कारण, अब आप चर का उपयोग कर सकते हैं, इसके बाद आयात की गई @import "variables.scss";किसी अन्य .scssफ़ाइल में लोड किया जा सकता है। इसलिए इन्हें type.scssबूटस्ट्रैप फोल्डर में भी इस्तेमाल किया जा सकता है my_model.css.scss।

इसके बाद नाम का फोल्डर बनाएं partialsया modules। यह अधिकांश अन्य फ़ाइलों का स्थान होगा। आप application.scssफ़ाइल में आयात जोड़ सकते हैं, इसलिए यह इस तरह दिखाई देगा:

@import "bootstrap/bootstrap.scss";
@import "partials/*";

अब अगर आप अपने होमपेज पर एक लेख शैली के लिए सीएसएस का एक सा बनाते हैं। बस बनाएं partials/_article.scssऔर इसे संकलित में जोड़ा जाएगा application.css। इंपोर्ट ऑर्डर की वजह से आप किसी भी बूटस्ट्रैप मिक्सअप और वैरिएबल का इस्तेमाल अपनी स्कैस फाइलों में कर सकते हैं।

इस विधि का एकमात्र दोष मुझे अब तक मिला है, कभी-कभी आपको आंशिक / * की एक recompile को मजबूर करना पड़ता है। फाइलों को स्कैन करें क्योंकि रेल आपके लिए हमेशा ऐसा नहीं करेगी।

Comments

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

— डेविड सेवेज

धन्यवाद! एक बहुत अच्छा दृष्टिकोण और एक अच्छी व्याख्या! उल्लेख के लायक एक परियोजना: यह फायरबग प्लगइन, फायरसैस , संकलित एप्लिकेशन की पंक्ति के बजाय my_model.css.sass की लाइन संख्या दिखाता है। एसएक्स

— बीबीक्यू शेफ

इस दृष्टिकोण के साथ, यदि मैं अपने डिफ़ॉल्ट लिंक रंग को लाल रंग में बदलना चाहता हूं जो मेरे सभी भाग पर लागू होता है, तो आप ऐसा कैसे करेंगे? आप इसे कहां रखेंगे?

— छ।

ध्यान दें कि यह दृष्टिकोण द एसेट पाइप लाइन रेल्स गाइड में भी अनुशंसित है । "यदि आप एकाधिक Sass फ़ाइलों का उपयोग करना चाहते हैं" खोजें।

— यबकोस

@ लाइकोस हां आप सब कुछ हटा दें application.cssऔर इसका नाम बदल दें application.scss। क्योंकि require_treeसिर्फ सब कुछ शामिल है और आप आमतौर पर आदेश को नियंत्रित करना चाहते हैं

— बेंजामिन उडिंक दस केट

Answer 2

चर और ऐसी फ़ाइलों का उपयोग करने के लिए, आपको @import निर्देश का उपयोग करने की आवश्यकता है। फ़ाइलें निर्दिष्ट क्रम में आयात की जाती हैं।

फिर, आयात की घोषणा करने वाली फ़ाइल की आवश्यकता के लिए application.css का उपयोग करें। यह आपके इच्छित नियंत्रण को प्राप्त करने का तरीका है।

अंत में, अपने लेआउट.बर्ब ​​फ़ाइल में, आप निर्दिष्ट कर सकते हैं कि किस "मास्टर" सीएसएस फ़ाइल का उपयोग करना है

उदाहरण अधिक उपयोगी होगा:

मान लीजिए कि आपके ऐप में दो मॉड्यूल हैं जिन्हें css के विभिन्न सेटों की आवश्यकता है: "एप्लीकेशन" और "एडमिन"

फ़ाइलें

|-app/
|-- assets/
|--- stylesheets/
|     // the "master" files that will be called by the layout
|---- application.css
|---- application_admin.css
|
|     // the files that contain styles
|---- config.scss
|---- styles.scss
|---- admin_styles.scss
|
|     // the files that define the imports
|---- app_imports.scss
|---- admin_imports.scss
|
|
|-- views/
|--- layouts/
|---- admin.html.haml
|---- application.html.haml

यहाँ फाइलें अंदर की तरह दिखती हैं:

-------- THE STYLES

-- config.scss
// declare variables and mixins
$font-size: 20px;

--  app_imports.scss
// using imports lets you use variables from `config` in `styles`
@import 'config'
@import 'styles'

-- admin_imports.scss
// for admin module, we import an additional stylesheet
@import 'config'
@import 'styles'
@import 'admin_styles'

-- application.css
// in the master application file, we require the imports
*= require app_imports
*= require some_other_stylesheet_like_a_plugin
*= require_self

-- application_admin.css
// in the master admin file, we require the admin imports
*= require admin_imports
*= require some_other_stylesheet_like_a_plugin
*= require_self


-------- THE LAYOUTS

-- application.html.haml
// in the application layout, we call the master css file
= stylesheet_link_tag "application", media: "all"

--  admin.html.haml
// in the admin layout, we call the admin master css file
= stylesheet_link_tag "application_admin", media: "all"

Answer 3

निम्नलिखित फ़ोल्डर संरचना बनाएँ:

+ assets
|
--+ base
| |
| --+ mixins (with subfolders as noted in your question)
|
--+ styles
  |
  --+ ...

फ़ोल्डर में baseएक फ़ाइल "globals.css.scss" बनाएं। इस फ़ाइल में, अपने सभी आयात घोषित करें:

@import 'base/colors';
@import 'base/mixins/...';
@import 'base/mixins/...';

आप में आवेदन। एससीएससी, तो आपके पास होना चाहिए:

*= require_self
*= depends_on ./base/globals.css.scss
*= require_tree ./styles

और अंतिम चरण के रूप में (यह महत्वपूर्ण है), @import 'base/globals'प्रत्येक शैली फ़ाइल में घोषित करें जहां आप चर या मिश्रण का उपयोग करना चाहते हैं। आप इस ओवरहेड पर विचार कर सकते हैं, लेकिन मुझे वास्तव में यह विचार पसंद है कि आपको हर फाइल में अपनी शैलियों की निर्भरता घोषित करनी होगी। बेशक, यह महत्वपूर्ण है कि आप केवल ग्लोबल्स.सीकेएस में मिश्रण और चर आयात करें क्योंकि वे शैली परिभाषाएं नहीं जोड़ते हैं। अन्यथा आपकी पूर्वनिर्धारित फ़ाइल में शैली परिभाषाएँ कई बार शामिल की जाएंगी ...

Comments

मैंने इसे आज़माया लेकिन इसे ठीक से काम करने के लिए कभी नहीं मिला (अभी भी लापता चर त्रुटियों को प्राप्त कर रहा था)। हो सकता है कि मैंने कुछ सही ढंग से नहीं किया हो, लेकिन मुझे लगता है कि अंत में सीएसएस ऑर्डर के मामले में मैन्युअल रूप से प्रत्येक फ़ाइल को सूचीबद्ध करने का तरीका सही तरीका है।

— डेविड सेवेज

आप अभी भी इस दृष्टिकोण का उपयोग कर सकते हैं: "requ_tree ..." के बजाय बस प्रत्येक व्यक्तिगत फ़ाइल के लिए एक पंक्ति जोड़ें। यह SASS फ़ाइलों को सही क्रम में आयात करेगा। अब आपके द्वारा उपयोग किए जा रहे समाधान के बारे में, कृपया इस पोस्ट पर एक नज़र डालें जो मैंने अभी पाया: stackoverflow.com/questions/7046495/… अपने Application.css फ़ाइल में depend_on directivie को शामिल करना सुनिश्चित करें।

— 21 फरबरी 21

Answer 4

इस प्रश्न के अनुसार , आप आयात को परिभाषित करने और अपने टेम्प्लेट के बीच चर साझा करने के लिए केवल उपयोग कर सकते हैं application.css.sass।

=> यह केवल नाम की चीज लगती है।

एक अन्य तरीका सब कुछ शामिल करने और इस पाइपलाइन को निष्क्रिय करने का हो सकता है ।

Comments

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

— डेविड सेवेज

Answer 5

मुझे एक समान समस्या थी। आंशिक आयात करते समय मुझे अंडरस्कोर @ स्टेटपोर्ट स्टेटमेंट में डालने में क्या मदद मिली। इसलिए

@import "_base";

के बजाय

@import "base";

यह एक अजीब बग हो सकता है ...