कमसीएसएस के साथ उपयोगकर्ता परिभाषित कार्यों?

Question

मैंने हाल ही में कमसीएसएस में प्रवेश किया है और मैं जो महसूस करता हूं उसमें दौड़ रहा हूं, यह बड़ी सीमा है और मैं सोच रहा था कि ऐसा करने का कोई तरीका है ?? मैं कहना चाहता हूं कि मैंने कहीं पढ़ा है कि सैस उपयोगकर्ता परिभाषित कार्यों के लिए अनुमति देता है लेकिन क्या कमसीएसएस वही करेगा?

मुझे क्या करना चाहते है:

@fs: 16; 

// either return the value 
.s(@t,@s,@u) { 
    // return @t/@s*@u; 
} 
#elem { 
    margin-top: .s(30,@fs,1em); 
    width: .s(900,@fs,1em); 
    .child { 
     width: .s(100,900,100%); 
    } 
} 

// or have a property argument 
.s(@t,@s,@u,@p) { 
    @{p}: @t/@s*@u; 
} 
#elem { 
    .s(30,@fs,1em,margin-top); 
    .s(900,@fs,1em,width); 
    .child { 
     .s(100,900,100%,width); 
    } 
} 

एक ही रास्ता मैं यह पता लगा सकते हैं, लेकिन यह बहुत ही सीमित है क्योंकि मैं कई mixins करना होगा:

.s(@t,@s,@u,@p) when (@p = margin-top) { margin-top: @t/@s*@u; } 
// margin[-top|-right|-bottom|-left] 
// padding[-top|-right|-bottom|-left] 
.s(@t,@s,@u,@p) when (@p = width) { width: @t/@s*@u; } 
.s(@t,@s,@u,@p) when (@p = height) { height: @t/@s*@u; } 

मुझे पता है मैं अंतर्निहित round() या ceil() फ़ंक्शन जैसे स्पेसिंग फ़ंक्शन को जोड़ने के लिए हमेशा कम.जेएस फ़ाइल को संशोधित कर सकता हूं। लेकिन, यह LessPHP, Crunch, SimpLess का उपयोग करके उत्पादन के लिए .less फ़ाइलों को संकलित करने का विकल्प मारता है।

Answer 1

जहां तक ​​मुझे पता है, कोई संपत्ति तर्क नहीं है: आपको इसे लिखना होगा।

यह है कि एक फ़ंक्शन एक गणना मूल्य या निर्देश (संपत्ति/ies और गणना मान) वापस कर देगा।

सीएसएस में हजारों गुण नहीं हैं, यह सैकड़ों कक्षाओं और कार्यों के साथ एक सीएमएस नहीं है, इसलिए आपकी सूची तब तक नहीं होगी जब तक आप कल्पना कर सकें। यदि आप ऐसी जटिल चीजें करना चाहते हैं तो आपको अपने सीएसएस जेनरेट करने के लिए अन्य सीएसएस प्रीप्रोसेसरों या बैकएंड भाषा का उपयोग करना चाहिए। या बेहतर इसे आसान रखें।
जिसके अनुसार, lessphp allows for user functions:

lessphp एक सरल विस्तार इंटरफेस जहां कि कम कोड में संकलन के दौरान संपर्क में आएंगे, उपयोगकर्ता कार्यों को लागू कर सकते हैं। हालांकि वे थोड़ा मुश्किल हो सकते हैं क्योंकि आपको कमजोर प्रकार प्रणाली के साथ काम करने की ज़रूरत है।

Answer 2

सूचना है कि आप भी आसानी से डिफ़ॉल्ट कम संकलक, जो आप परीक्षण और उत्पादन के लिए कमांड लाइन lessc संकलक के लिए ग्राहक के पक्ष less.js संकलक उपयोग करने के लिए सक्षम करने के लिए कस्टम कार्यों जोड़ सकते हैं।

कम 1.x

1. डाउनलोड के लिए और कम से GitHub से स्रोत अनज़िप: https://github.com/less/less.js/releases/latest
2. भागो npm install
3. ओपन lib/functions.js फ़ाइल

4. अपने कस्टम समारोह (returncenter() में जोड़ें यह उदाहरण) tree.functions ऑब्जेक्ट के अंदर, उदाहरण के लिए:

   tree.functions = { 
   returncenter: function() { 
   return new(tree.Anonymous)('center'); 
   }, 
   //original function below 
   } 
   

5. भागो grunt dist

पिछले चरण आप अपने HTML में जिले/कम-1.x.x/js को शामिल करने या dist/lessc संकलक के साथ अपने कम कोड संकलन कर सकते हैं के बाद।

कम 2 के लिए।एक्स

1. डाउनलोड करें और पर GitHub से स्रोत अनज़िप: https://github.com/less/less.js/archive/master.zip
2. भागो npm install

3. एक फ़ाइल caleld lib/less/functions/custom.js बनाएँ और नीचे में निम्न सामग्री लिखें:

   var Anonymous = require("../tree/anonymous"), 
       functionRegistry = require("./function-registry"); 
   
   functionRegistry.addMultiple({ 
   returncenter: function() { 
   return new(Anonymous)('center'); 
   } 
   }); 
   

4. ओपन lib/less/function/index.js फ़ाइल और पंजीकरण कार्यों की सूची में require("./custom"); संलग्न करें, बससे पहले

5. भागो grunt dist

अब आप निम्नलिखित कम कोड का उपयोग कर सकते हैं:

selector { 
property: returncenter();  
} 

कम कोड पूर्ववर्ती निम्नलिखित सीएसएस कोड में संकलित होगा:

selector { 
property: center;  
}