फाउंडेशन - सैस फंक्शंस
फाउंडेशन एस.ए.एस.एस. उपयोगिता कार्यों का एक सेट है, जो के साथ इस्तेमाल किया जा सकता प्रदान करता है util , रंग , चयनकर्ता , यूनिट , मूल्य और कई और अधिक।
आप निम्न लाइन की कोड का उपयोग करके एक समय में सभी उपयोगिता फ़ाइलों को आयात कर सकते हैं -
@import 'util/util';
आप नीचे दी गई जानकारी के अनुसार व्यक्तिगत उपयोगिता की फाइलें भी आयात कर सकते हैं -
@import 'util/color';
@import 'util/selector';
@import 'util/unit';
@import 'util/value';
सैस संदर्भ
आप निम्न SASS फ़ंक्शन का उपयोग करके घटकों की शैली बदल सकते हैं।
अग्रभूमि
यह पृष्ठभूमि के रंग के आधार पर तत्वों को अग्रभूमि रंग प्रदान करता है। यह विभिन्न प्रकार के मापदंडों को निर्दिष्ट करने के लिए निम्न प्रारूप का उपयोग करता है -
foreground($color, $yes, $no, $threshold)
उपरोक्त पैरामीटर निम्नलिखित तालिका में निर्दिष्ट हैं -
अनु क्रमांक। | पैरामीटर और विवरण | प्रकार | डिफ़ॉल्ट मान |
---|---|---|---|
1 |
$color यह रंग की हल्कापन की जाँच करता है। |
रंग | कोई नहीं |
2 |
$yes यदि रंग हल्का है, तो यह $ हां रंग देता है। |
रंग | $ काला |
3 |
$no यदि रंग गहरा है, तो यह $ नो रंग देता है। |
रंग | $ सफेद |
4 |
$threshold यह लपट की दहलीज का प्रतिनिधित्व करता है। |
प्रतिशत | 60% |
स्मार्ट पैमाने पर
यह अपनी चमक के अनुसार तत्वों के लिए उपयुक्त रंग प्रदान करता है। यह उपयुक्त रंग निर्दिष्ट करने के लिए निम्नलिखित प्रारूप का उपयोग करता है -
smart-scale($color, $scale, $threshold)
ऊपर दिए गए पैरामीटर निम्नलिखित तालिका में दिए गए हैं -
अनु क्रमांक। | पैरामीटर और विवरण | प्रकार | डिफ़ॉल्ट मान |
---|---|---|---|
1 |
$color इसका उपयोग रंग को स्केल करने के लिए किया जाता है। |
रंग | कोई नहीं |
2 |
$scale यह प्रतिशत को ऊपर या नीचे करने के लिए निर्दिष्ट करता है। |
प्रतिशत | 5% |
3 |
$threshold यह लपट की दहलीज का प्रतिनिधित्व करता है। |
प्रतिशत | 40% |
पाठ आदानों
यह टेक्स्ट इनपुट प्रकार का उपयोग करते समय चयनकर्ता बनाता है। यह इनपुट प्रकारों को निर्दिष्ट करने के लिए निम्नलिखित प्रारूप का उपयोग करता है -
text-inputs($types)
यह निम्न तालिका में निर्दिष्ट पैरामीटर का उपयोग करता है -
अनु क्रमांक। | पैरामीटर और विवरण | प्रकार | डिफ़ॉल्ट मान |
---|---|---|---|
1 |
$types यह चयनकर्ता बनाने के लिए कई प्रकार के पाठ इनपुट प्रकार प्रदान करता है। |
रंग | - |
पट्टी इकाई
यह इकाई को मान से निकालता है और केवल संख्या देता है। यह इकाई को मान से हटाने के लिए निम्नलिखित प्रारूप का उपयोग करता है -
strip-unit($num)
यह निम्न तालिका में निर्दिष्ट पैरामीटर का उपयोग करता है -
अनु क्रमांक। | पैरामीटर और विवरण | प्रकार | डिफ़ॉल्ट मान |
---|---|---|---|
1 |
$num जब आप इकाई को मान से हटाते हैं तो यह संख्या निर्दिष्ट करता है। |
रंग | कोई नहीं |
रेम-calc
यह रेम मानों से मेल खाने के लिए पिक्सेल मान को बदलता है। यह मूल्यों को हटाने के लिए पिक्सेल मूल्यों को परिवर्तित करने के लिए निम्न प्रारूप का उपयोग करता है -
rem-calc($values, $base)
यह तालिका में निर्दिष्ट निम्न मापदंडों का उपयोग करता है -
अनु क्रमांक। | पैरामीटर और विवरण | प्रकार | डिफ़ॉल्ट मान |
---|---|---|---|
1 |
$values यह पिक्सेल मानों को मूल्यों को बदलने और रिक्त स्थान का उपयोग करके उन्हें अलग करने के लिए परिवर्तित करता है। यदि आप अल्पविराम से अलग सूची में परिवर्तित कर रहे हैं, तो कोष्ठक में सूची लपेटें। |
संख्या या सूची | कोई नहीं |
2 |
$base यह पिक्सेल को मान प्रदान करने के लिए आधार मूल्य प्रदान करता है। यदि आधार के लिए शून्य मान है, तो फ़ंक्शन आधार के रूप में $ बेस-फ़ॉन्ट-आकार चर का उपयोग करता है। |
संख्या | शून्य |
है-मूल्य
यह मान निर्दिष्ट करता है यदि यह गलत नहीं है। झूठे मूल्यों में अशक्त, कोई नहीं, 0 या एक खाली सूची शामिल है। यह मान निर्दिष्ट करने के लिए निम्न प्रारूप का उपयोग करता है -
has-value($val)
यह निम्न तालिका में निर्दिष्ट पैरामीटर का उपयोग करता है -
अनु क्रमांक। | पैरामीटर और विवरण | प्रकार | डिफ़ॉल्ट मान |
---|---|---|---|
1 |
$val यह निर्दिष्ट मान की जाँच करता है। |
मिश्रित | कोई नहीं |
मिल-साइड
यह एक मान के पक्ष को निर्दिष्ट करता है और पैडिंग, मार्जिन आदि पर शीर्ष / दाएं / नीचे / बाएं मानों को परिभाषित करता है। यह मूल्य के पक्ष को निर्दिष्ट करने के लिए निम्न प्रारूप का उपयोग करता है -
has-value($val)
यह तालिका में निर्दिष्ट निम्न मापदंडों का उपयोग करता है -
अनु क्रमांक। | पैरामीटर और विवरण | प्रकार | डिफ़ॉल्ट मान |
---|---|---|---|
1 |
$val यह एक मूल्य के पक्ष को निर्दिष्ट करता है। |
सूची या संख्या | कोई नहीं |
2 |
$side यह निर्धारित करता है कि किस तरफ (ऊपर / दाएं / नीचे / बाएं) मूल्य वापस आना चाहिए। |
कीवर्ड | कोई नहीं |
मिल-सीमा-मूल्य
यह एक तत्व के सीमा मूल्य को निर्धारित करता है। यह सीमा मूल्य को निर्दिष्ट करने के लिए निम्नलिखित प्रारूप का उपयोग करता है -
get-border-value($val, $elem)
यह तालिका में निर्दिष्ट निम्न मापदंडों का उपयोग करता है -
अनु क्रमांक। | पैरामीटर और विवरण | प्रकार | डिफ़ॉल्ट मान |
---|---|---|---|
1 |
$val यह सीमा का एक विशिष्ट मूल्य पाता है। |
सूची | कोई नहीं |
2 |
$elem इसका उपयोग सीमा घटक को निकालने के लिए किया जाता है। |
कीवर्ड | कोई नहीं |