कम में गतिशील सीएसएस गुण?

Question

मैं द्वि-दिशात्मक वेबसाइट के लिए एक कम स्टाइलशीट लिख रहा हूं, और मुझे एक कम फ़ाइल लिखनी है और बाएं से दाएं लेआउट (एलटीआर) के लिए दो अलग-अलग स्टाइलशीट्स का उत्पादन करना है और दूसरा दाएं से लेकर लेफ लेआउट के लिए (RTL)

इसलिए जब मैं RTL लेआउट के लिए स्टाइल हूँ, मैं, सही होने का पूरा छोड़ दिया मूल्य परिवर्तित सूख यह एक नाव, गद्दी या मार्जिन है करना चाहते हैं,

ऐसा करने के लिए, मैं आवश्यक परिभाषित किया है निम्नानुसार मेरी निम्न फ़ाइल के शीर्ष पर चर:

@left: right; 
@right: left; 

बस, मैं तेज़ी से तत्वों को तेज़ी से फ़्लोट कर सकता हूं रों

float: @left; // this will be floated to left in ltr layout while it will be right in rtl layout. 

लेकिन मेरी समस्या यह है कि मैं स्थिति तत्वों जब पूरी तरह से, या अपेक्षाकृत, मैं left या right संपत्ति गतिशील लिखने में सक्षम होना चाहता हूँ भी सक्षम उदाहरण के लिए, इन चर का उपयोग करने के लिए गतिशील गुण निर्माण करने के लिए हो सकता है चाहता हूँ @left चर के मूल्य पर निर्भर करता है के रूप में

position: relative; 
@left: 10px; 

इस प्रकार है, लेकिन इस संकलन के बारे में कोई सुराग नहीं कैसे ऐसा करने के लिए एक त्रुटि देता है,, ध्यान दें कि मैं इस एस.ए.एस.एस. का उपयोग किया जाता है, लेकिन अब तक मैं यह नहीं मिल सका कम से कम काम करने के लिए?

Answer 1

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

मूल रूप से हम तीन कम फ़ाइलों होगा (वे और अधिक हो सकता है!):

style-ltr.less // this where we hold the rtl variables 
style-rtl.less // rtl variables 
main.less  // here we'll write our styles 

style-ltr.less में निम्न चर को परिभाषित:

@left: left; 
@right: right; 

@import "main.less"; 

style-rtl.less में वे निम्न मान होगा, जबकि :

// reflect variables 
@left: right; 
@right: left; 

@import "main.less"; 

अबमें, अब हम निम्नलिखित mixins

.left(@distance) when (@left = left) { 
    left: @distance; 
} 
.left(@distance) when (@left = right) { 
    right: @distance; 
} 
.right(@distance) when (@right = right) { 
    right: @distance; 
} 
.right(@distance) when (@right = left) { 
    left: @distance; 
} 

// now we can style our elements using these mixins 
div.something { 
    position: relative; 
    .left(10px); 
    float: @left; 
} 

को परिभाषित करेंगे सब हम क्या करना है लीटर पन्नों में style-ltr.less, और div.something शामिल करने के लिए style-rtl.less rtl पन्नों में शामिल हैं (या संकलित सीएसएस संस्करण), शामिल करने के लिए भी है एलटीआर पृष्ठों पर बायीं तरफ तैर जाएगा, जबकि इसे आरटीएल पृष्ठों

पर दाईं ओर फ़्लोट किया जाएगा ध्यान दें कि आप padding, margin, border-radius ...etc. को उसी तरह से परिभाषित कर सकते हैं।

:

अद्यतन

मैं एक द्वि-दिशात्मक अनुप्रयोगों

• bi-app-less
• bi-app-sass

क्रेडिट के निर्माण में मदद करने के GitHub पर दो परियोजनाओं बनाया 0

मेरे प्रिय मित्रविक्टर Zamfir

Answer 2

अद्यतन: में गार्ड भाव पर एक नजर डालें कम - शायद यह थोड़ा मदद कर सकते हैं, तो आप थोड़े सशर्त बयान बना सकते हैं, लेकिन आप ..

मैं अपनी बात को समझने mixins उपयोग करने के लिए है, लेकिन अन्य पर हाथ मैं इस समस्या से अलग तरीके से संपर्क करूंगा। यहाँ एक और सरलीकृत ले है - आप दोनों ही मामलों में अंतर के लिए वैरिएबल निर्धारित है, और फिर आयात के रूप में आप चाहते हैं - गुरु-लीटर में उदाहरण के लिए, जगह/गुरु-rtl और बाद स्टाइलशीट के बाकी आयात:

// master-ltr.less 
// LTR: 
@sidebar-pos-left: 10px; 
@sidebar-pos-right: 0px; 
@content-float: left; 
... 
@import 'styles.less'; 

// your styles.less would have: 
.content { 
    float: @content-float; 
    ... 
} 
.sidebar { 
    position: relative; 
    left: @sidebar-pos-left; 
    right: @sidebar-pos-right; 
    ... 
} 

.. या शायद अधिक प्रभावी - vars-ltr/rtl के साथ अलग फ़ाइल बनाएं, और फिर अपने मास्टर-एलटीआर/आरटीएल में आयात करें।

सुनिश्चित नहीं है कि वास्तव में लेआउट कितना जटिल है, लेकिन शायद यह आपको कुछ ऐसा उपयोग कर सकता है जिसका आप उपयोग कर सकते हैं?

---

मैं इस का उपयोग कर String Interpolation लेकिन जैसे चर केवल परिभाषा के "चर" पक्ष पर एम्बेड किया जा सकता यह लग रहा है की कोशिश की है। मैं यहां गलत हो सकता हूं, शायद लोगों को यह पता चलेगा कि इसे कैसे प्राप्त किया जाए।

मैं थोड़ा अलग करता हूं, क्योंकि यह कम से कम संभव नहीं है, लेकिन कोड के संगठन और सामान्य रूप से अधिक दृष्टिकोण के कारण (कुछ "बाएं" नाम देना अच्छा नहीं है जब कभी-कभी यह वास्तव में " सही ":)

position:relative के साथ अपने दूसरी समस्या के लिए, यहाँ मेरी ले रहा है:

<div class="element element-ltr">...</div> 

.element { 
    position: relative; 
    &.element-ltr { 
    left: @element-side-position; 
    } 
    &.element-rtl { 
    right: @element-side-position; 
    } 
} 

कि समाधान थोड़े ठीक है, लेकिन अगर आप कर रहे हैं स्टाइलशीट बहुत बड़ा है, तो आप बहुत से खत्म करने के लिए जा रहे हैं -ltr और -rtl के लिए अतिरिक्त कक्षाओं के। वास्तव में एक बड़ा दर्द नहीं है लेकिन आप वास्तव में माता-पिता के कंटेनरों (जैसे हेडर/सामग्री/साइडबार/पाद लेख) के लिए -ltr/-rtl के दायरे को विस्तृत करके इसे और भी अधिक उपयोगी बना सकते हैं और फिर वहां से समायोजित कर सकते हैं। उनके पास पृष्ठभूमि, रंग, फ़ॉन्ट आकार जैसे बहुत आम हो सकते हैं .. और आप केवल उनके -ltr/-rtl संस्करणों में अंतरों पर काम करेंगे।

इसके अलावा, LESS Namespaces पर पढ़ें, वे आपको और भी संगठनात्मक शक्तियां प्रदान कर सकते हैं।

आशा है कि इससे मदद मिलती है!

Answer 3

से प्रेरित आप DotLess उपयोग कर रहे हैं, वहाँ है कि बजाय यहां mixins के एक परिमित संख्या को परिभाषित करने के लिए किया जा सकता और अधिक दिलचस्प कुछ है।

यह आरटीएल प्लगइन के रूप में अंतर्निहित है।

https://github.com/dotless/dotless/wiki/Plugins

dotless.Compiler.exe -p:Rtl:forceRtlTransform=true,onlyReversePrefixedRules=false file.less 

Answer 4

आप इस पुस्तकालय की जाँच हो सकता है: https://github.com/DevelopmentIL/direction.less

यह कई सीएसएस-नियमों के लिए बड़े समर्थन हासिल है। उदाहरण के लिए:

@direction: rtl; // use `rtl` or `ltr` 
@import "direction.less"; 

body { 
    .direction(); 
} 

.float { 
    .float(); 
} 

.box { 
    display: inline-block; 
    .margin-left(4px); 
    .padding-right(1em); 
} 

विल उत्पादन:

body { 
    direction: rtl; 
} 

.float { 
    float: right; 
} 

.box { 
    display: inline-block; 
    margin-right: 4px; 
    padding-left: 1em; 
}