نظام ألوان CSS العالمي / الجلد

Question

أنا أقوم بتكوين موقع باستخدام CSS الذي يجب أن يكون قابلاً للعلامة التجارية / قابلة للعلامة التجارية. من الناحية الفنية ، لكل "علامة تجارية" لدي مجموعة من خمس قيم ألوان في قاعدة بيانات.

ما أريد القيام به هو إنشاء ملفات CSS بحيث يكون نظام الألوان للموقع بأكمله موحدًا وإعادة استخدام الألوان ، حتى أتمكن من تغيير القيمة في مكان واحد وتغيير الموقع بأكمله. سيبدو المفهوم هكذا:

.sitebasecolor {color: sienna ؛}

P {Font-Size: 50 ؛ اللون: sitebasecolor ؛}

هل هناك طريقة لإنجاز شيء مثل هذا؟

Answer 1

إذا كنت ترغب في التحقيق في اختيار المعالج المسبق (المفضل لدي لهذه الحالة) ، فأنا أتفق مع Pekka ، لكن خياري سيكون ساس الذي ، على ما أعتقد ، قوي من أقل ..

باستخدام معالج CSS Preprocessor ، يمكنك كتابة إعلان ملف Sass واحد عن ترجمةه في 6 ملفات CSS مختلفة فقط تغيير متغيرات الألوان في كل مرة ...

ولكن ، إذا كنت تريد سحب الألوان من قاعدة بيانات ، فربما يكون من الأسهل استخدام قصاصات PHP في ملف CSS ..

Answer 2

لماذا لا تكتب فقط 6 ملفات CSS؟ واحد لجميع المحتوى (بدون لون المخطط) وواحد لكل لون. ثم يمكنك فقط تضمين الشخص الذي تحتاجه.

نفس الشيء إذا قمت بإنشائه بواسطة PHP ، فقط قم بعمل 5 نقطة دخول مختلفة للمخططات وتضمينها الصحيحة ...

Answer 3

للأسف ، لا يدعم CSS المتغيرات. سيكون عليك استخدام معالج مسبق CSS مثل أقل أو XCSS, أو استخدام قصاصات PHP:

<? $ourColor = "#FF0000"; ?>

.....
div.content { color: <?php echo $ourColor; ?> }