قم بإنشاء متغير في ملف .CSS لاستخدامه داخل ملف .CSS هذا [نسخة مكررة]

Question

التكرار المحتمل:
تجنب الثوابت المتكررة في CSS

لدينا بعض "ألوان السمات" التي يُعاد استخدامها في ورقة CSS الخاصة بنا.

هل هناك طريقة لتعيين متغير ثم إعادة استخدامه؟

على سبيل المثال.

.css
OurColor: Blue

H1 { 
 color:OurColor;
}

Answer 1

ليس هناك شرط بأن تكون جميع أنماط المحدد موجودة في قاعدة واحدة، ويمكن تطبيق قاعدة واحدة على محددات متعددة...لذا اقلبها:

/* Theme color: text */
H1, P, TABLE, UL
{ color: blue; }

/* Theme color: emphasis */
B, I, STRONG, EM
{ color: #00006F; }

/* ... */

/* Theme font: header */
H1, H2, H3, H4, H5, H6
{ font-family: Comic Sans MS; }

/* ... */

/* H1-specific styles */
H1
{ 
   font-size: 2em; 
   margin-bottom: 1em;
}

بهذه الطريقة، يمكنك تجنب تكرار الأنماط الموجودة من الناحية المفاهيمية نفس الشيء، مع توضيح أجزاء المستند التي تؤثر عليها أيضًا.

لاحظ التركيز على كلمة "من الناحية المفاهيمية" في الجملة الأخيرة...لقد ظهر هذا للتو في التعليقات، لذا سأقوم بالتوسع فيه قليلاً، حيث رأيت أشخاصًا يرتكبون نفس الخطأ مرارًا وتكرارًا لسنوات - حتى قبل وجود CSS: سمتان تتقاسمان نفس القيمة لا يعني بالضرورة أنهما يمثلان نفس الشيء مفهوم.قد تظهر السماء باللون الأحمر في المساء، وكذلك الطماطم - لكن السماء والطماطم ليستا حمراء لنفس السبب، وألوانهما سوف تختلف مع مرور الوقت بشكل مستقل.وعلى نفس المنوال، فإن مجرد وجود عنصرين في ورقة الأنماط الخاصة بك لهما نفس اللون أو الحجم أو الموضع لا يعني أنهما سوف يكونا كذلك دائماً مشاركة هذه القيم.مصمم ساذج يستخدم التجميع (كما هو موضح هنا) أو معالج متغير مثل SASS أو LESS لتجنب ذلك قيمة فالتكرار يخاطر بإجراء تغييرات مستقبلية على التصميم المعرض للخطأ بشكل لا يصدق؛التركيز دائما على المعنى السياقي من الأساليب عند البحث عن تقليل التكرار، وتجاهلها القيم الحالية.

Answer 2

يمكنك تحقيق ذلك وأكثر من ذلك بكثير باستخدام أقل CSS.

Answer 3

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

على سبيل المثال:

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

بالإضافة إلى المتغيرات، فهو يوفر القدرة على تداخل المحددات، والحفاظ على الأشياء مجمعة بشكل منطقي:

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.2em;
  }
}

هناك المزيد:mixins التي تعمل نوعًا من الوظائف المشابهة، والقدرة على وراثة محدد من آخر.إنه ذكي جدًا ومفيد جدًا.

إذا كنت تقوم بالبرمجة باستخدام Ruby on Rails، فسيتم تجميعها تلقائيًا إلى CSS نيابةً عنك، ولكن هناك أيضًا مترجم للأغراض العامة يمكنه القيام بذلك نيابةً عنك عند الطلب.

Answer 4

أنت لست أول من يتساءل والجواب هو لا.إليوت لديه صخب لطيف على ذلك: http://cafe.elharo.com/web/css-repeats-itself/.يمكنك استخدام JSP، أو ما يعادله، لإنشاء CSS في وقت التشغيل.

Answer 5

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

Answer 6

هذا غير مدعوم في الوقت الحالي إلا إذا كنت تستخدم بعض البرامج النصية لإنتاج CSS بناءً على بعض المتغيرات التي حددتها.

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

Answer 7

نظرًا لأن CSS لا يحتوي على ذلك (حتى الآن، أعتقد أن الإصدار التالي سيفعل ذلك)، فاتبع نصيحة كونراد رودولف للمعالجة المسبقة.ربما تريد استخدام واحدة موجودة بالفعل:م4

http://www.gnu.org/software/m4/m4.html

Answer 8

أنت تجعل الأمر معقدًا للغاية.هذا هو سبب وجود الشلال.ما عليك سوى تقديم محددات العناصر الخاصة بك وتصنيف اللون الخاص بك:

h1 {
   color: #000;
}
.a-theme-color {
   color: #333;
}

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

<h1>This is my heading.</h1>
<h1 class="a-theme-color">This is my theme heading.</h1>

Answer 9

لقد قمت بكتابة ماكرو (في Visual Studio) يسمح لي ليس فقط بترميز CSS للألوان المسماة ولكن أيضًا لحساب ظلال أو مزج تلك الألوان بسهولة.كما أنه يتعامل مع الخطوط.يتم تشغيله عند الحفظ وإخراج نسخة منفصلة من ملف CSS.وهذا يتماشى مع حجة بيرت بوس أن أي معالجة للرموز في CSS تتم عند نقطة التأليف، وليس عند نقطة التفسير.

سيكون الإعداد الكامل مع كل التعليمات البرمجية معقدًا بعض الشيء بحيث لا يمكن نشره هنا، ولكنه قد يكون مناسبًا لنشر مدونة في المستقبل.إليك قسم التعليق من الماكرو والذي يجب أن يكون كافيًا للبدء.

---

أهداف هذا النهج هي كما يلي:

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

2. تجنب الاضطرار إلى تعيين ملحق .CSS في IIS

3. قم بإنشاء ملفات CSS نصية متنوعة يمكن استخدامها، على سبيل المثال، من خلال وضع تصميم VisualStudio

4. قم بإنشاء هذه الملفات مرة واحدة في وقت التأليف، بدلاً من إعادة حسابها في كل مرة يتم فيها طلب ملف CSS

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

باستخدام هذا الأسلوب، يتم تمثيل الألوان وظلال الألوان وعائلات الخطوط برموز مختصرة تشير إلى قائمة القيم في ملف XML.

يجب أن يسمى ملف XML الذي يحتوي على تعريفات اللون والخط Constants.xml ويجب أن يكون موجودًا في نفس المجلد مثل ملفات CSS.

يتم تشغيل أسلوب ProcessCSS بواسطة EnvironmentEvents عندما يقوم VisualStudio بحفظ ملف CSS.يتم توسيع ملف CSS، ويتم حفظ النسخة الثابتة والموسعة من الملف في المجلد /css/static/.(يجب أن تشير جميع صفحات HTML إلى إصدارات /css/static/ من ملفات CSS).

قد يبدو ملف Constants.xml على النحو التالي:

<?xml version="1.0" encoding="utf-8" ?>
<cssconstants>
  <colors>
    <color name="Red" value="BE1E2D" />
    <color name="Orange" value="E36F1E" />
    ...
  </colors>
  <fonts>
    <font name="Text" value="'Segoe UI',Verdana,Arial,Helvetica,Geneva,sans-serif" />
    <font name="Serif" value="Georgia,'Times New Roman',Times,serif" />
    ...
  </fonts>
</cssconstants>

في ملف CSS، يمكنك بعد ذلك الحصول على تعريفات مثل:

   font-family:[[f:Text]];
   background:[[c:Background]]; 
   border-top:1px solid [[c:Red+.5]]; /* 50% white tint of red */

Answer 10

أنظر أيضا تجنب الثوابت المتكررة في CSS.كما قال Farinha، تم تقديم مقترح لمتغيرات CSS، لكن في الوقت الحالي، تريد استخدام معالج مسبق.

Answer 11

يمكنك استخدام فئات متعددة في سمة فئة عنصر HTML، حيث توفر كل منها جزءًا من التصميم.لذلك يمكنك تعريف CSS الخاص بك على النحو التالي:

.ourColor { color: blue; }
.ourBorder { border: 1px solid blue; }
.bigText { font-size: 1.5em; }

ثم قم بدمج الفئات كما هو مطلوب:

<h1 class="ourColor">Blue Header</h1>
<div class="ourColor bigText">Some big blue text.</div>
<div class="ourColor ourBorder">Some blue text with blue border.</div>

يتيح لك ذلك إعادة استخدام فئةourColor دون الحاجة إلى تحديد اللون عدة مرات في CSS الخاص بك.إذا قمت بتغيير السمة، فما عليك سوى تغيير قاعدة اللون الخاص بنا.

Answer 12

قد يبدو هذا ضربًا من الجنون، ولكن إذا كنت تستخدم NAnt (أو Ant أو أي نظام إنشاء آلي آخر)، فيمكنك استخدام خصائص NAnt كمتغيرات CSS بطريقة مخترقة.ابدأ بملف قالب CSS (ربما styles.css.template أو شيء من هذا القبيل) يحتوي على شيء مثل هذا:

a {
    color: ${colors.blue};
}

    a:hover {
        color: ${colors.blue.light};
    }

p {
    padding: ${padding.normal};
}

ثم قم بإضافة خطوة إلى الإصدار الخاص بك والتي تقوم بتعيين جميع قيم الخاصية (أستخدم ملفات البناء الخارجية و<include>) وتستخدم مرشح <expandproperties> لإنشاء CSS الفعلي:

<property name="colors.blue" value="#0066FF" />
<property name="colors.blue.light" value="#0099FF" />
<property name="padding.normal" value="0.5em" />

<copy file="styles.css.template" tofile="styles.css" overwrite="true">
    <filterchain>
        <expandproperties/>
    </filterchain>
</copy>

الجانب السلبي بالطبع هو أنه يتعين عليك تشغيل هدف إنشاء CSS قبل أن تتمكن من التحقق من شكله في المتصفح.ومن المحتمل أن يقيدك ذلك في إنشاء كل ملفات CSS الخاصة بك يدويًا.

ومع ذلك، يمكنك كتابة وظائف NAnt للقيام بجميع أنواع الأشياء الرائعة التي تتجاوز مجرد توسيع الخاصية (مثل إنشاء ملفات صور متدرجة ديناميكيًا)، لذلك بالنسبة لي كان الأمر يستحق العناء.

Answer 13

لا تستخدم CSS (حتى الآن) المتغيرات، وهو أمر مفهوم بالنسبة لعمرها ولكونها لغة تعريفية.

فيما يلي طريقتان رئيسيتان لتحقيق معالجة أكثر ديناميكية للأسلوب:

• المتغيرات من جانب الخادم في CSS المضمنة
  مثال (باستخدام PHP):

  <style> .myclass{color:<?php echo $color; ?>;} </style>

 

• معالجة DOM باستخدام جافا سكريبت لتغيير جانب عميل CSS
  أمثلة (باستخدام مكتبة jQuery):

  $('.myclass').css('color', 'blue');

  أو

  //The jsvarColor could be set with the original page response javascript
// in the DOM or retrieved on demand (AJAX) based on user action. $('.myclass').css('color', jsvarColor);