design-patterns - examples - design patterns شرح




تصميم أنماط لكتابة مواضيع متعددة في ستيلوس/ساس؟ (2)

أنا أكتب ورقة أنماط لموقع على شبكة الإنترنت حيث أنا بحاجة لدعم جلود / المواضيع متعددة. على سبيل المثال، قد يكون موضوع واحد أسود على أبيض مع الأحمر كما اللون الأساسي، وموضوع آخر قد يكون أبيض على أسود مع المارون كما اللون الأساسي.

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

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

/* main.css */
#box {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 200px;
    height: 200px;
}

/* theme1.css */
#box {
    backround-color: red;
}

/* theme2.css */
#box {
    background-color: maroon
}

ثم يقوم المستخدم النهائي بتحميل main.css بالإضافة إلى واحدة من أنماط أنماط الموضوع. تصميم آخر سيكون لوضع فئة على عنصر الجسم، واستخدام محددات لتطبيق الألوان المناسبة، كل ذلك في ملف كس واحد. فمثلا،

#box {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 200px;
    height: 200px;
}

body.theme1 #box {
    backround-color: red;
}

body.theme2 #box {
    background-color: maroon
}

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

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

أتصور شيئا من هذا القبيل ربما:

@theme(theme1) {
    $primaryColor: red;
}
@theme(theme2) {
    $primaryColor: maroon;
}

#box {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 200px;
    height: 200px;

    background-color: $primaryColor;
}

والتي بدورها تولد ملفات كس الثلاثة المذكورة أعلاه في المثال الأول.

أيه أفكار؟ هل هناك شيء من هذا القبيل موجود بالفعل؟


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

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

كما أنها قابلة للتطوير أكثر سهولة من الخيار الثاني الخاص بك حيث يمكنك إنشاء موضوع آخر وإضافة ملف كسس فقط إلى الخادم / التطبيق الخاص بك، في حين مع الخيار الثاني لديك لإعادة تحميل الملف بأكمله. ليس كثيرا من قضية ولكن الحفاظ على أن ملف ساس ربما ينتهي مملة جدا إذا كان لديك الكثير من المواضيع، حتى لو كنت تقسيمها إلى جزئية ثم @import 'themes/theme-red' أو شيء مماثل في ساس الرئيسية ستايلشيت قبل تجميع.

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


وهنا كيف انتهى بي الأمر بهذا. جعل ثلاثة ملفات ستيلوس: main.styl ، theme1.styl ، و theme2.styl . ثم عدل محتواها كما هو موضح أدناه:

// theme1.styl
primaryColor = red
@require("main.styl")

// theme2.styl
primaryColor = maroon
@require("main.styl")

// main.styl
#box {
    top: 50px
    left: 50px
    width: 200px
    height: 200px
    background-color: primaryColor
}

ثم ما كنت في نهاية المطاف مع هو theme1.css و theme2.css التي تحتوي على كافة التعاريف للتطبيق مع كل منها التجميع. (لن تحتاج إلى استخدام main.css أي أكثر.)





stylus