Milligram: تغيير لون التظليل بسهولة (# 9b4dca)

تم إنشاؤها على ٢٢ فبراير ٢٠١٨ · 6تعليقات · مصدر: milligram/milligram

باستخدام متغيرات CSS3 (خصائص مخصصة) ، من الممكن تجاوز لون التمييز في سطر واحد من CSS.

في ملف milligram.css ، يوجد شيء على غرار:

:root {
  --highlight-color: #9b4dca;
}

ثم استبدل كل #9b4dca بـ var(--highlight-color) .

بمجرد الانتهاء من ذلك ، يكون استبدال لون التمييز سهلاً مثل تضمين ملف custom.css به

:root {
  --highlight-color: #abcabc;
}

Hacktoberfest new feature

مصدر

mterron

👍10 ❤3

التعليق الأكثر فائدة

لقد جئت إلى هنا لنفس الشيء ^ ^ ولكن نظرًا لأنه مكتوب بلغة SASS وقد ترغب في دعم المتصفحات القديمة ، فإنني أوصي بعمل مثال مثبت احتياطيًا أكثر مثل هذا:

button {
  background-color: $color-primary;
  background-color: var(--color-primary, $color-primary);
}

بهذه الطريقة ، ستظل المتصفحات التي لا تدعم خصائص CSS المخصصة تتراجع إلى إصدار يعمل. وبهذه الطريقة أيضًا ، لا يلزم وجود :root {} في أوراق الأنماط الفعلية نظرًا لأن var() يوفر بالفعل خيارًا احتياطيًا.

هتافات،
دومينيك

dkundel في ٢٣ مارس ٢٠١٨

👍6

ال 6 كومينتر

button {
  background-color: $color-primary;
  background-color: var(--color-primary, $color-primary);
}

هتافات،
دومينيك

dkundel في ٢٣ مارس ٢٠١٨

👍6

هل أي تقدم أو أي شيء تم إنجازه في هذا الشأن حتى الآن؟ 😄

timrossback في ٢٩ يونيو ٢٠١٩

هل أي تقدم أو أي شيء تم إنجازه في هذا الشأن حتى الآن؟ 😄

يمكنك دائمًا تغيير قيم الألوان من src/_Color.sass ثم إعادة التجميع مرة أخرى باستخدام sass --update . يمكنك أيضًا إضافة ملفات sass الخاصة بك.

dntzbgh في ٢٩ يونيو ٢٠١٩

هل أي تقدم أو أي شيء تم إنجازه في هذا الشأن حتى الآن؟ 😄
يمكنك دائمًا تغيير قيم الألوان من src/_Color.sass ثم إعادة التجميع مرة أخرى باستخدام sass --update . يمكنك أيضًا إضافة ملفات sass الخاصة بك.

نقطة جيدة! أعتقد أنني أبحث عن حل خارج الصندوق أكثر قليلاً لأنني لا أستخدم Sass ، لكنني لا أعرف حقًا كيف يمكن القيام بذلك بسهولة بخلاف تغيير القيم نفسها في /dist/milligram.min.css والذي سيكون مشكلة.

timrossback في ٣٠ يونيو ٢٠١٩

👍1

أحب هذا الإطار! لا يمكن أن تنتظر حتى يتم إطلاق هذه الميزة 🚀