ورقة الغش لمساعدتك على تذكر خصائص CSS المخصصة

تمثل خصائص CSS المخصصة ، والمعروفة أيضًا باسم متغيرات CSS ، الخصائص المخصصة التي يمكن الإعلان عنها واستدعائها في CSS.

قم بتعريف خاصية مخصصة في CSS

للإعلان عن خاصية مخصصة في CSS ، تحتاج إلى استخدام --بناء الجملة:

:root { --colorPrimary: hsla(360, 100%, 74%, 0.6); }

لاحظ :rootمحدد الفئة الزائفة - يمكننا أن نعلن عن متغيراتنا على الصعيد العالمي باستخدامه. يمكننا أيضًا التصريح عنها باستخدام محددات أخرى ، وبعد ذلك سيتم تحديد نطاقها في تلك المحددات.

.theme-dark { --colorPrimary: hsla(360, 100%, 24%, 0.6); }

استخدم خاصية مخصصة في CSS

لاستخدام خاصية CSS المخصصة في CSS ، يمكنك استخدام var()الوظيفة:

:root { --colorPrimary: tomato; } .theme-dark { --colorPrimary: lime; } body { background-color: var(--colorPrimary); }

في هذه الحالة ، bodyسيكون لون الخلفية tomato، ولكن body.theme-darkمن lime.

استخدم الخصائص المخصصة بدون وحدات

يمكن الإعلان عن خصائص CSS المخصصة بدون وحدات إذا تم استخدامها مع calc()الوظيفة.

:root { --spacing: 2; } .container { padding: var(--spacing) px; /*Doesn't Work ?*/ padding: calc(var(--spacing) * 1rem); /*Will output 2rem ?*/ }

استخدم الخصائص المخصصة مع JavaScript

للحصول على خاصية مخصصة ، يمكننا استخدام ما يلي:

getComputedStyle(element).getPropertyValue("--my-var"); // Or if inline element.style.getPropertyValue("--my-var");

لتحديث قيمة الخاصية المخصصة:

element.style.setProperty("--my-var", newVal);

مثال على الحصول على القيم واستبدالها:

في المثال التالي ، نستخدم مكتبة وحدة التحكم dat.gui لتغيير قيمة الخصائص المخصصة --scenePerspective و --cubeRotateY و --cubeRotateX. تسهل هذه الطريقة تطبيق نمط جديد ، حيث لا يتعين عليك تطبيق نمط مضمّن على كل عنصر من عناصر DOM.

شكرا للقراءة!

مصادر

تحديد الخصائص المخصصة: - * عائلة الخصائص

الخصائص المخصصة: متغيرات CSS - MDN

var () - MDN

استخدام خصائص CSS المخصصة (المتغيرات) - MDN

يمكنك قراءة المزيد من مقالاتي على مدونتي.