{ jS@lam }

مقالات، دروس، مقتطفات في البرمجة و تطوير المواقع

المتحولات في CSS

أضيفت من قبل سلام الجهني في CSS في

كلما تضخم حجم ملف .css كان من الأصعب تعديله، هناك تغييرات نحتاج لفعلها أينما وردت، أغلب التصاميم تستخدم بعض الصفات العامة مثل مجموعة ألوان او خطوط ... و عند الرغبة بتعديلها نحتاج لتغيير قيمة اللون او الخط او لون الإطار... في كل المستند وهذا مزعج، على الرغم من إمكانية استخدام البحث و الاستبدال في محرر النصوص لكن هناك خيارات أفضل من ذلك. استخدام المتحولات.

افرض أن لدينا كود HTML و CSS التاليين:

<div class="btn">

<a href="#" class="link">My Link</a>

</div>





.btn{

padding:10px;

border-radius:5px;

background-color:#766868;

display:inline-block;

}

.link{

color:#ffffff;

text-decoration:none;

font-family:consolas;

display:block;

}

.btn:hover{

background-color:#ffffff;

border:1px solid #766868;

}

.btn:hover .link{

color:#766868;

}



نلاحظ أننا نستخدم الألوان #766868 و #ffffff عدة مرات، فإذا أردنا تغيير سمة الموقع، اللونين السابقين، نحتاج لعدة تعديلات ومؤكد انها أكثر من الكود السابق، لذلك نعمد إلى استخدام المتحولات.

يتم تعريف متحول في CSS بالشكل:

--var-name:#766868;



و استخدامه بالشكل:

background-color:var(--var-name);



إذا طبقنا الأمر على الكود السابق ينتج لدينا:



:root{

--main-color:#766868;

--second-color:#ffffff;

}



.btn{

padding:10px;

border-radius:5px;

background-color:var(--main-color);

display:inline-block;

}

.link{

color:var(--second-color);

text-decoration:none;

font-family:consolas;

display:block;

}

.btn:hover{

background-color:var(--second-color);

border:1px solid var(--main-color);

}

.btn:hover .link{

color:var(--main-color);

}





:root هنا تشير إلى إمكانية استخدام المتحول في كل المستند، اما لو وضعنا شيء آخر مثل div سيمكننا استخدام المتحول في الكتل من نوع div و أبنائها في مستند html.

تعليقات (0)

إضافة تعليق

تعليقات

لا تعليقات بعد !