CSS
कस्टम गुण (चर)

परिचय

वाक्य - विन्यास

• : रूट {} / * छद्म वर्ग जो चर की अधिक वैश्विक परिभाषा के लिए अनुमति देता है * /
• - परिवर्तनीय-नाम: मूल्य ; / * परिभाषित चर * /
• var (- वेरिएबल-नेम, डिफॉल्ट-वैल्यू ) / * डिफॉल्ट वैल्यू फॉलबैक * / के साथ डिफाइन्ड वेरिएबल का उपयोग करें

टिप्पणियों

चर रंग

:root {
  --red: #b00;
  --blue: #4679bd;
  --grey: #ddd;
}
.Bx1 {
  color: var(--red);
  background: var(--grey);
  border: 1px solid var(--red);
}

चर आयाम

:root {
  --W200: 200px;
  --W10: 10px;
}
.Bx2 {
  width: var(--W200);
  height: var(--W200);
  margin: var(--W10);
}

चर कैस्केडिंग

सीएसएस चर अन्य गुणों की तरह ही कैस्केड करते हैं, और उन्हें सुरक्षित रूप से पुनर्स्थापित किया जा सकता है।

आप कई बार चर को परिभाषित कर सकते हैं और केवल उच्चतम विशिष्टता के साथ परिभाषा चयनित तत्व पर लागू होगी।

इस HTML को मान लें:

<a class="button">Button Green</a>
<a class="button button_red">Button Red</a>
<a class="button">Button Hovered On</a>

हम इसे सीएसएस लिख सकते हैं:

.button {
  --color: green;
  padding: .5rem;
  border: 1px solid var(--color);
  color: var(--color);
}

.button:hover {
  --color: blue;
}

.button_red {
  --color: red;
}

और यह परिणाम प्राप्त करें:

मान्य / invalids

नामकरण जब सीएसएस चर का नामकरण किया जाता है, तो इसमें अन्य सीएसएस गुणों की तरह केवल अक्षर और डैश शामिल होते हैं (जैसे: लाइन-ऊंचाई, -मोज़-बॉक्स-साइज़िंग) लेकिन यह दोहरे डैश (-) से शुरू होना चाहिए

//These are Invalids variable names
--123color: blue;
--#color: red;
--bg_color: yellow
--$width: 100px;

//Valid variable names
--color: red;
--bg-color: yellow
--width: 100px;

सीएसएस चर मामले संवेदनशील हैं।

/* The variable names below are all different variables */
--pcolor: ;
--Pcolor: ;
--pColor: ;

खाली जगह

/* Invalid */
    --color:;

/* Valid */
  --color: ; /* space is assigned */

concatenations

    /* Invalid - CSS doesn't support concatenation*/
    .logo{
        --logo-url: 'logo';
        background: url('assets/img/' var(--logo-url) '.png');
    }

    /* Invalid - CSS bug */
    .logo{
        --logo-url: 'assets/img/logo.png';
        background: url(var(--logo-url));
    }

    /* Valid */
    .logo{
        --logo-url: url('assets/img/logo.png');
        background: var(--logo-url);
    }

इकाइयों का उपयोग करते समय सावधान

    /* Invalid */
    --width: 10;
    width: var(--width)px;

    /* Valid */
    --width: 10px;
    width: var(--width);

    /* Valid */
    --width: 10;
    width: calc(1px * var(--width)); /* multiply by 1 unit to convert */
    width: calc(1em * var(--width));

मीडिया के सवालों के साथ

आप मीडिया प्रश्नों के भीतर चर को फिर से सेट कर सकते हैं और उन नए मूल्यों को कैस्केड कर सकते हैं जहां उनका उपयोग किया जाता है, कुछ ऐसा जो पूर्व-प्रोसेसर चर के साथ संभव नहीं है।

यहां, एक मीडिया क्वेरी एक बहुत ही साधारण ग्रिड सेट करने के लिए उपयोग किए जाने वाले चर को बदल देती है:

एचटीएमएल

<div></div>
<div></div>
<div></div>
<div></div>

सीएसएस

:root{
    --width: 25%;
    --content: 'This is desktop';
}
@media only screen and (max-width: 767px){
    :root{
        --width:50%;
        --content: 'This is mobile';
    }
}
@media only screen and (max-width: 480px){
    :root{
        --width:100%;
    }
}

div{
    width: calc(var(--width) - 20px);
    height: 100px;
}
div:before{
    content: var(--content);
}

/* Other Styles */
body {
    padding: 10px;
}

div{
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight:bold;
    float:left;
    margin: 10px;
    border: 4px solid black;
    background: red;
}

आप इस CodePen डेमो में विंडो का आकार बदलने की कोशिश कर सकते हैं

यहाँ क्रिया में आकार के एक एनिमेटेड स्क्रीनशॉट है: