طريقة واحدة لاستخدام متغيرات CSS اليوم
قم بإنشاء موقع يعتمد ديناميكيًا على مظاهر الضوء والظلام والألوان.
عرض تفاعلي
قم بإنشاء لون أساسي يتغير. ربطه إلى موضوع البيانات في HTML.
أمثلة التعليمات البرمجية تستخدم & من بناء جملة أقل / scss
html[data-theme='green'] { --theme-color: 110; }
الآن نحن بحاجة إلى الألوان نفسها. أو بالأحرى سطوعها وتشبعها. للقيام بذلك ، سوف نستخدم مخطط hsl. نضع كل المتغيرات في: الجذر.
:root { --color: ~'hsl(var(--theme-color), 15%, 44%)'; --background-color: ~'hsl(var(--theme-color), 30%, 10%)'; }
حسنا هنا. القضية الصغيرة. الاستيلاء على العنصر المطلوب وتطبيق المتغير لدينا عليه.
.class-name { color: var(--color); background-color: var(--background-color); }
الآن سوف نغير التباين. استبدال: الجذر مع HTML [مع السمة].
// :root = html html { &[data-theme-style='normal'] { } &[data-theme-style='dark'] { } }
الآن لكل موضوع نأخذ قيمنا
html { &[data-theme-style='normal'] { --color: ~'hsl(var(--theme-color), 15%, 44%)'; --background-color: ~'hsl(var(--theme-color), 30%, 10%)'; } &[data-theme-style='dark'] { --color: ~'hsl(var(--theme-color), 70%, 31%)'; --background-color: ~'hsl(var(--theme-color), 3%, 3%)'; } }
الروابط:
عرض تفاعلي
شكرا مارسين Wichary على هذه الفكرة.