2013-02-08 49 views
6

मेरे पास एक एससीएसएस परियोजना है जो कम्पास के माध्यम से फाउंडेशन के शीर्ष पर बनाता है। यह सास चर का एक सेट को परिभाषित करता है, तो उन चर के मामले में नियमों का एक समूह को परिभाषित करता है: (अपने प्रोजेक्ट कई और अधिक चर सेटिंग्स और आयात बयान है, यह सरल है।)एससीएसएस/कम्पास के लिए गतिशील आयात?

vars.scss:

$foo = #fafafa 
$bar = 14px; 

// rules using $foo and $bar 
@import '_rules'; 

मैं तो कम्पास का उपयोग vars.scss संकलित करने के लिए, और सब कुछ सास चर के उस समूह के लिए अच्छा है। हालांकि, मैं भी विषय की क्षमता मेरे ऐप को अलग ढंग से चाहते हैं, और चर का एक नया सेट जो मूल चर ओवरराइड कर सकते हैं परिभाषित करते हुए एक अलग विषय उत्पन्न:

vars.scss:

$foo = #fafafa 
$bar = 14px; 

@import 'otherVars'; 

@import '_rules'; 

मैं 70+ थीम होने पर फ़ाइल को मैन्युअल रूप से संपादित नहीं कर सकता। (करने के बाद यह है कि कई विषयों मेरे ऐप के प्रयोजनों के लिए आवश्यक है।) क्या मैं सच में चाहते हैं निम्नलिखित की तरह कुछ करने के लिए सक्षम होने के लिए है:

vars.scss:

$foo = #fafafa 
$bar = 14px; 

@import '{{otherVars}}'; 

@import '_rules'; 

और फिर मैं की तरह कुछ कह सकते हैं:

compass --otherVars themes/theme2 

यह तो, सभी विषयों की कोड़ा करने के लिए आसान हो सकता है क्योंकि मैं प्रत्येक विषय के लिए एक बार compass कह सकते हैं।

क्या एससीएसएस आपको ऐसा करने देता है? मैंने इसमें देखा, और ऐसा नहीं लगता है।

_app_prefix.scss:

$foo = #fafafa 
$bar = 14px; 

_app_suffix.scss:

@import '_rules'; 

मेरे वर्तमान समाधान का एक उपसर्ग और प्रत्यय में मूल vars.scss विभाजित करने के लिए है

app.scss:

theme2.scss:

@import '_app_prefix'; 

// only override $foo - let the original value of $bar stand 
$foo = #ebebeb; 

@import '_app_suffix'; 

यह

@import '_app_prefix'; 
// no overrides by default 
@import '_app_suffix'; 

और एक विशिष्ट विषय के लिए ओवरराइड कर, आप एक फ़ाइल है कि लगता है कि बनाने चाहते हैं काम करता है, लेकिन दर्दनाक है और अतिरिक्त बॉयलरप्लेट पेश करता है।

मेरी अगली समस्या अतिरिक्त @import 'rules_foo' कथन है, जिसे गतिशील रूप से निर्मित करने की भी आवश्यकता है। तो मेरी समग्र कल्पना इस तरह दिखेगी:

युद्ध।एससीएसएस:

$foo = #fafafa 
$bar = 14px; 

@import '{{otherVars}}'; 

@import '_rules'; 
{{ @import 'additional_rules' for additional_rules in rules }} 

और मैं कह सकते हैं:

compass --otherVars themes/theme2 --rules "rules_1" "rules_2" "rules_3" 

(जाहिर है यह कुछ हद तक handwavy है, लेकिन उम्मीद है कि आपको अंदाजा हो।)

वहाँ यह करने के लिए कोई तरीका है? या क्या मुझे हैंडलबार या कुछ अन्य templating भाषा का सहारा लेना होगा?

उत्तर

0

आप हमेशा एक अस्थायी फ़ाइल जेनरेट कर सकते हैं जिसे आप कंपास पर भेजते हैं। अजगर कोड के साथ:

import sys 
with open('tmp.scss', 'w') as out: 
    out.write((""" 
$foo = #fafafa 
$bar = 14px; 

@import '%(pre-rules)s'; 

@import '_rules'; 
%(post-rules)s 
    """ % {'pre-rules': sys.argv[1], 'post-rules': '\n'.join(["@import '%s';" % x for x in sys.argv[2:]])}).strip()) 

आप इसे पसंद फोन चाहते हैं:

और यह/बनाता उत्पादन आप चाहते हैं के साथ tmp.scss अधिलेखित कर देता है।

+0

हां, लेकिन यह बिल्ड समय पर गतिशील रूप से सेटटेबल नहीं है, और यह कई आयातों की अनुमति नहीं देता है। –

+0

हम्म, हाँ ठीक है, आप सही हैं ... मैंने अपना जवाब बदलकर अपने प्रश्न से अधिक निकटता से मेल खाया। उम्मीद है की वो मदद करदे! – boxed

+0

हाँ, वह दृष्टिकोण वह है जिसे मैं वर्तमान में ले रहा हूं (मैं हैंडलबार का उपयोग कर रहा हूं)। मैं कुछ कम हैकी की उम्मीद कर रहा था। –

1

एसएएसएस के डेवलपर्स को viability of this request पर विचार करने में समस्याएं प्रतीत होती हैं।

  1. https://github.com/nex3/sass/issues/658
  2. https://github.com/nex3/sass/issues/115
  3. https://github.com/nex3/sass/issues/451

हालांकि, कम यह और दस्तावेजों में यह बहुत अच्छी तरह से समर्थन करता है::

यहां लोगों को सुविधा का अनुरोध है http://lesscss.org/features/#variables-feature-import-statements

1

लोगों के लिए जो का उपयोग कर रहे हैं

sass: { 
    options: { 
    loadPath: ['../src/css/themes/myTheme/'], 
    style: 'nested', 
    precision: 2 
    }, 

और /src/css/import.scss आप कर सकते हैं में तो: ग्रंट उनके एससीएसएस/एस.ए.एस.एस. फ़ाइलों को संकलित करने, समाधान loadPath करने के लिए "सास" कार्य विन्यास इस प्रकार एक अतिरिक्त पैरामीटर जोड़ने का था विषय से उन फ़ाइलों को शामिल रूप में यदि वे मौजूदा निर्देशिका में थे:

@import "config"; 

फ़ाइल /src/css/themes/myTheme/config.scss से शामिल किया गया था।

नोट: आप निश्चित रूप से अपने ग्रंट कार्य में पैरामीटर जोड़ सकते हैं और उस विषय का नाम गतिशील हो सकते हैं!