फाउंडेशन - सैस मिक्सिंस

आयात कर रहा है

यह SASS मिश्रण की सामग्री को आयात करता है जिसे scss / use / _mixins.scss फ़ाइल के अंतर्गत रखा जाता है । आप निम्नलिखित लाइन ऑफ़ कोड का उपयोग करके SASS मिश्रण को आयात कर सकते हैं -

@import 'util/mixins';

सैस संदर्भ

आप SASS फ़ंक्शन का उपयोग करके घटकों की शैली बदल सकते हैं।

mixins

आप अपने घटकों के लिए CSS वर्ग संरचना बनाने के लिए निम्नलिखित मिश्रण का उपयोग कर सकते हैं।

CSS-TRIANGLE

इसका उपयोग ड्रॉपडाउन तीर, ड्रॉपडाउन पिप्स और कई और अधिक बनाने के लिए किया जाता है। यह मौजूदा तत्व में एक त्रिकोण को संलग्न करने के लिए </ i> या <i> या </ i> चयनकर्ता के पहले <i> & :: का उपयोग करता है। यह निम्न प्रारूप का उपयोग करता है -

@include css-triangle($triangle-size, $triangle-color, $triangle-direction);

यह तालिका में निर्दिष्ट निम्न मापदंडों का उपयोग करता है -

अनु क्रमांक।	पैरामीटर और विवरण	प्रकार	डिफ़ॉल्ट मान
1	$triangle-size यह त्रिभुज की चौड़ाई को परिभाषित करता है।	संख्या	कोई नहीं
2	$triangle-color यह त्रिभुज के रंग को परिभाषित करता है।	रंग	कोई नहीं
3	$triangle-direction यह त्रिभुज की दिशा को परिभाषित करता है जैसे कि ऊपर, दाएं, नीचे या बाएं।	कीवर्ड	कोई नहीं

HAMBURGER

यह चौड़ाई, ऊंचाई, बार और रंगों के साथ मेनू आइकन बनाने के लिए उपयोग किया जाता है। यह निम्न प्रारूप का उपयोग करता है -

@include hamburger($color, $color-hover, $width, $height, $weight, $bars);

यह तालिका में निर्दिष्ट निम्न मापदंडों का उपयोग करता है -

अनु क्रमांक।	पैरामीटर और विवरण	प्रकार	डिफ़ॉल्ट मान
1	$color यह आइकन के लिए रंग को परिभाषित करता है।	रंग	कोई नहीं
2	$color-hover जब आप आइकन पर हॉवर करते हैं तो यह रंग को परिभाषित करता है।	रंग	कोई नहीं
3	$width यह आइकन की चौड़ाई को परिभाषित करता है।	संख्या	कोई नहीं
4	$height यह आइकन की ऊंचाई को परिभाषित करता है।	संख्या	कोई नहीं
5	$weight यह आइकन में व्यक्तिगत सलाखों के वजन को परिभाषित करता है।	संख्या	कोई नहीं
6	$bars यह आइकन में बार की संख्या को परिभाषित करता है।	संख्या	कोई नहीं

BACKGROUND-TRIANGLE

इसका उपयोग बैकग्राउंड इमेज को एक एलिमेंट में निर्दिष्ट करने के लिए किया जाता है। यह निम्न प्रारूप का उपयोग करता है -

@include background-triangle($color);

यह तालिका में निर्दिष्ट पैरामीटर का उपयोग करता है -

अनु क्रमांक।	पैरामीटर और विवरण	प्रकार	डिफ़ॉल्ट मान
1	$color यह त्रिकोण के लिए रंग को परिभाषित करता है।	रंग	$ काला

CLEARFIX

यह मिश्रण स्वचालित रूप से बच्चों के तत्वों को साफ करता है, ताकि अतिरिक्त मार्कअप की आवश्यकता न हो। यह निम्न प्रारूप का उपयोग करता है -

@include clearfix;

AUTO-WIDTH

यह स्वचालित रूप से कंटेनर में मौजूद तत्वों की संख्या के आधार पर तत्वों को आकार देता है। यह निम्न प्रारूप का उपयोग करता है -

@include auto-width($max, $elem);

यह तालिका में निर्दिष्ट निम्न मापदंडों का उपयोग करता है -

अनु क्रमांक।	पैरामीटर और विवरण	प्रकार	डिफ़ॉल्ट मान
1	$max यह कंटेनर में अधिकतम वस्तुओं की पहचान करता है।	संख्या	कोई नहीं
2	$elem यह चयनकर्ताओं के लिए एक टैग का उपयोग करता है।	कीवर्ड	ली

DISABLE-MOUSE-OUTLINE

इसका उपयोग तत्व के चारों ओर की रूपरेखा को निष्क्रिय करने के लिए किया जाता है जब यह माउस इनपुट क्रिया की पहचान करता है। यह निम्न प्रारूप का उपयोग करता है -

@include disable-mouse-outline;

ELEMENT-INVISIBLE

यह तत्वों को छिपाने के लिए उपयोग किया जाता है और कीबोर्ड और अन्य उपकरणों के लिए उपलब्ध हो सकता है। यह निम्न प्रारूप का उपयोग करता है -

@include element-invisible;

ELEMENT-INVISIBLE-OFF

इसका उपयोग अदृश्य तत्वों को हटाने के लिए किया जाता है और तत्व-अदृश्य () मिश्रण का उपयोग करके CSS आउटपुट को उलट दिया जाता है । यह निम्न प्रारूप का उपयोग करता है -