المتغيرات في CSS4

أمثلة عن المتغيرات في CSS4 وطريقة استعمالها المصدر: http://ateweb.blogspot.com/

by mohamad lounnas

HTML

<h1>
المتغيرات في CSS4 
<h1>
<br/>
<h1>
متغير يعمل على كامل الصفحة<h1>
<br/>
<div class="var">
هنا مثال
</div>
<br/>
<h1>
متغير يعمل على جزء محدد<h1>
<br/>
    
<div class="in">
<div class="varin">
هنا مثال
</div>
</div>




<br>
      <br>
      <br>

      
<a href="https://ateweb.blogspot.com" rel="dofolow">By http://ateweb.blogspot.com/</a>

CSS

/*هذا مثال لمتغير يعمل على الوثيقة كاملةً*/
:root {
  --color: #1abc9c;/* يجب على المتغير أن يكون مسبوقا بعلامة -- سالبتين*/
  --background: #454545;
  --border: 5px solid #222;
  --padding: 20px;
}

.var {
color: var(--color);/*لإستدعاء المتغير يجب إظافته داخل var(هنا المتغير)*/
border: var(--border);
background: var(--background);
padding: var(--padding);
}

/*مثال لمتغير يعمل على جزء محدد*/
.in {
  --color2: #454545; 
  --background2: #1abc9c;
  --padding2: 20px;
}
.varin {
color: var(--color2);
border: var(--border);/*سيعمل لأنه ضمن الوثيقة أي كل الصفحة*/
      
background: var(--background2);
padding: var(--padding2);
/*هنا سترى ان المتغير يعمل على هذا الجزء*/
}

/* By http://ateweb.blogspot.com/*/