पावर फंक्शन - सीएसएस-ट्रिक्स

अंकगणित के साथ बहुत उपयोगी होते हुए, सैस गणितीय सहायक कार्यों के साथ थोड़ा कम हो जाता है। लगभग 3 वर्षों के लिए गणित से संबंधित कार्यों के लिए आधिकारिक भंडार पर एक खुला मुद्दा रहा है।

Compass या SassyMath जैसे कुछ तृतीय-पक्ष विक्रेता गणित सुविधाओं के लिए उन्नत समर्थन प्रदान करते हैं, लेकिन वे बाहरी निर्भरताएं हैं जो (चाहिए?) से बचा जाना चाहिए।

इस मामले पर सबसे लोकप्रिय अनुरोध में से एक एक शक्ति समारोह या एक प्रतिपादक ऑपरेटर भी है। दुर्भाग्य से, सास में अभी भी इसके लिए कोई समर्थन नहीं है और जबकि यह अभी भी सक्रिय चर्चा के अधीन है, यह बहुत जल्द होने की संभावना नहीं है।

इस बीच, एक निश्चित शक्ति के लिए एक संख्या जुटाने में सक्षम होने के लिए सीएसएस में बहुत उपयोगी है। यहाँ कुछ उदाहरण दिए गए हैं जहाँ यह काम आएगा:

एक रंग की चमक को निर्धारित करने के लिए;
अंकों की एक निश्चित राशि के लिए एक संख्या को ठीक करने के लिए;
कुछ करने के लिए (उलटा) त्रिकोणमिति…

सैस कार्यान्वयन

सौभाग्य से हमारे लिए, यह संभव है (और काफी सरल) कुछ भी नहीं बल्कि सैस के साथ एक शक्ति समारोह बनाने के लिए। हम सभी की जरूरत है एक पाश और कुछ बुनियादी गणितीय ऑपरेटरों (जैसे कि *और /)।

धनात्मक पूर्णांक घातांक

हमारे कार्य (नाम pow) को इसके सबसे छोटे रूप में देखा जाएगा:

@function pow($number, $exponent) ( $value: 1; @if $exponent > 0 ( @for $i from 1 through $exponent ( $value: $value * $number; ) ) @return $value; )

यहाँ एक उदाहरण है:

.foo ( width: pow(20, 2) * 1px; // 400px )

सकारात्मक या नकारात्मक पूर्णांक घातांक

हालाँकि यह केवल एक सकारात्मक `$ पॉवर` तर्क के साथ काम करता है। नकारात्मक घातांक को छोड़ना इतना कठिन नहीं होगा, हमें बस एक छोटी अतिरिक्त स्थिति की आवश्यकता है:

@function pow($number, $exponent) ( $value: 1; @if $exponent > 0 ( @for $i from 1 through $exponent ( $value: $value * $number; ) ) @else if $exponent < 0 ( @for $i from 1 through -$exponent ( $value: $value / $number; ) ) @return $value; )

यहाँ एक उदाहरण है:

.foo ( width: pow(10, -2) * 1px; // 0.0001px )

सकारात्मक या नकारात्मक प्रतिपादक

अब, क्या होगा यदि हम गैर-पूर्णांक घातांक चाहते हैं? जैसे कि 4.2उदाहरण के लिए? सच्चाई यह है कि यह वास्तव में आसान नहीं है। यह अभी भी उल्लेखनीय है, लेकिन इसके लिए केवल एक लूप और कुछ ऑपरेशन की आवश्यकता है।

यह बॉर्नबोन रिपॉजिटरी पर modular-scale(… )फ्रेमवर्क से कार्य पूरा करने के लिए किया गया है (हालांकि इसे अस्वीकार कर दिया गया है)। यहाँ कोड है:

@function pow($number, $exponent) ( @if (round($exponent) != $exponent) ( @return exp($exponent * ln($number)); ) $value: 1; @if $exponent > 0 ( @for $i from 1 through $exponent ( $value: $value * $number; ) ) @else if $exponent pow(10, $ten-exp)) ( $ten-exp: $ten-exp + 1; ) @return summation(ln-maclaurin, $value / pow(10, $ten-exp), 1, 100) + $ten-exp * $ln-ten; )

आगे के विचार

खैर, यह गहन था। यदि आपको गैर-पूर्णांक एक्सपीरियंस (जैसे 4.2) के लिए समर्थन की आवश्यकता होती है , तो मैं आपको एक बाहरी निर्भरता का उपयोग करने की सलाह देता हूं जो आपके प्रोजेक्ट में इस सभी कोड को शामिल करने के बजाय इसे प्रदान करता है (जैसे sass-math-pow)। ऐसा नहीं है कि यह एक बुरी बात है, लेकिन यह वास्तव में आपके प्रोजेक्ट की भूमिका नहीं है कि इतने बड़े गैर-अधिकृत पॉलीफिलिंग कोड की माउंट की मेजबानी करें (यही कारण है कि हमारे पास पैकेज प्रबंधक हैं)।

यह भी ध्यान दें कि ये सभी ऑपरेशन सैस जैसी पतली परत के लिए काफी गहन हैं। इस बिंदु पर, और यदि आपका डिज़ाइन उन्नत गणितीय कार्यों पर भरोसा करता है, तो संभवतः इन प्लगइन (Node.js, रूबी, आदि) से इन हेल्पर्स के कार्यान्वयन को पास करना बेहतर होगा, एक प्लगइन सिस्टम (चश्मा, रूबी) के माध्यम से सैस के लिए। मणि, आदि)।

लेकिन बुनियादी pow(… )उपयोग के लिए, मैं सरल संस्करणों की पर्याप्त सिफारिश नहीं कर सकता!