सीएसएस व्हेरिएबल्स आणि त्यांचा वापर

बरेच लोक CSS व्हेरिएबल्सशी अपरिचित आहेत आणि आपण त्यापैकी एक असू शकता! सीएसएस व्हेरिएबल्स आणि त्यांचा वापर कसा करावा याची स्वत: ची ओळख करून देण्याची आता वेळ आहे.

सीएसएस व्हेरिएबल्स एका विशिष्ट घटकासाठी वापरकर्त्याने परिभाषित गुणधर्म म्हणून घोषित केली आहेत. त्यानंतर आपण हा घटक वापरता तेथे आपण ही सानुकूल मालमत्ता वापरू शकता.

स्पष्टीकरण आणि वापर

सानुकूल मालमत्ता घोषित करण्यासाठी:

घटक {- पार्श्वभूमी रंग: # f00; }

येथे घटक कोणत्याही घटकांचा निवडक असू शकतो, उदा. बी. डिव्ह, पी,. टेस्ट इ.

आम्ही काय केले - आम्ही या घटकासाठी एक कस्टम प्रॉपर्टी घोषित केली - - बॅकग्राउंड-कलर. सर्व सानुकूल सीएसएस गुणधर्म - ने प्रारंभ होणे आवश्यक आहे.

आता आम्ही ही फंक्शन संपत्ती व्हेरिएक्शनद्वारे घटकात वापरू शकतो.

घटक {पार्श्वभूमी रंग: वार (- पार्श्वभूमी रंग); }

येथे आम्ही पूर्वी घोषित केलेल्या व्हेरिएबलला घटकाची बॅकग्राउंड-कलर प्रॉपर्टी दिली आहे.

ते सर्व काही चांगले आणि चांगले आहे, परंतु आम्ही सामान्यत: स्वतःलाच एकापेक्षा वेगळे बनवितो. घटक प्रकारात वापरकर्ता-परिभाषित चल घोषित करणे व्यावहारिक नाही.

एकापेक्षा जास्त घटक प्रकारात सानुकूल मालमत्ता वापरण्यासाठी, आम्ही छद्म वर्गात मूळ सानुकूलित मालमत्ता घोषित करू शकतो: मूळ.

: रूट {- बेस रंग: # 333; }

आता आपण आपल्या डॉक्युमेंटच्या प्रत्येक घटकामध्ये -प्रायमरी कलर व्हेरिएबल वापरू शकतो.

div {रंग: वर (- प्राथमिक रंग); }
पी {पार्श्वभूमी रंग: var (- बेस रंग); }
.schick {फ्रेम रंग: var (- मूलभूत रंग); }

आमची आत असलेली सानुकूल प्रॉपर्टी घोषित करून: रूट, आम्ही आता ते मजकूर रंग सेट करण्यासाठी डी मध्ये वापरू शकतो, पार्श्वभूमी रंग सेट करण्यासाठी p आणि सीमेचा रंग सेट करू इच्छित असलेल्या वर्गासह कोणताही घटक. अशाप्रकारे, आम्ही केवळ पुनरावृत्ती कमी केली नाही, परंतु दिलेल्या वेबसाइटवर आमच्या वेबसाइटचे प्राथमिक रंग संपादित करणे आणि बदलणे देखील सुलभ केले.

वारसा

घटकांना सानुकूल गुणधर्म देखील मिळू शकतात. समजा आपल्याकडे खालील HTML कोड आहेः

  
  

नंतर आम्ही पालकांकरिता --text-size नावाचे व्हेरिएबल घोषित करू.

. पालक {- मजकूर आकार: 15px; }

आता आम्ही केवळ पालकांमध्येच नाही तर मुलांमध्ये --टेक्स्ट-आकार वापरू शकतो.

.पहिले मूल {फॉन्ट आकार: var (- मजकूर आकार); }

आम्ही सानुकूल गुणधर्म अधिलिखित करू शकतो. मुलामध्ये सानुकूल मालमत्ता पुन्हा घोषित करून आम्ही हे करू शकतो:

. सेकंड चाईल्ड {- मजकूर आकार: 30px; }

आता आपण. सेकंड-मुलामध्ये टेक्स्ट-आकार वापरत असल्यास, त्याचे मूल्यांकन 30px पर्यंत होते, परंतु आपण ते प्रथम-मुलामध्ये किंवा पालकांच्या अंतर्गत वापरले असल्यास ते अद्याप 15px आहे.

फॉलबॅक मूल्ये

आपण व्हेरिएबलसाठी फॉरबॅक व्हॅल्यू दुसर्‍या पॅरामीटरला व्हेरिएटद्वारे परिभाषित करू शकता. उदाहरणार्थ:

. सेकंड चाईल्ड {फॉन्ट आकार: वार (- मजकूर आकार, 30px); }

व्हेरिएबल अद्याप परिभाषित नसल्यास फॉलबॅक मूल्ये वापरली जातात. ते ब्राउझरची विसंगतता पुनर्स्थित करण्यासाठी वापरली जात नाहीत.

निष्कर्ष

आणि हेच आपण सीएसएस व्हेरिएबल्स वापरू शकता! लक्षात ठेवा की इंटरनेट एक्सप्लोरर सारखे काही ब्राउझर त्यांचे समर्थन करीत नाहीत. म्हणून आपणास सर्व ब्राउझरचे समर्थन करायचे असल्यास, आपण हे लक्षात घेतले पाहिजे.