Theming with Sass: An SCSS Tutorial
نشرت: 2022-03-11يعمل تطوير ورقة الأنماط باستخدام Sass ، حتى عند استخدام ميزاته الأساسية ، مثل الخصائص أو المتغيرات المتداخلة ، على توفير وقت ثمين وتسهيل الحياة لمطوري الواجهة الأمامية. ليس من المستغرب أن المعالجات المسبقة لـ CSS قد تم تبنيها على نطاق واسع كطريقة فعلية لإنشاء أنماط لمواقع الويب والتطبيقات ؛ نحن ببساطة لا نستطيع العيش بدونهم بعد الآن.
عندما يتعلق الأمر بالتخصيص ؛ أي تغيير شكل ومظهر موقع الويب الخاص بك مع الحفاظ على تخطيطه ، يمكن لميزات Sass - مثل الخلطات أو الوظائف - أن تشعر وكأنك تأخذ طائرة بدلاً من المشي! في هذا البرنامج التعليمي لـ SCSS ، سننشئ سمة بسيطة ونستخدم SCSS لمنح برمجة CSS لدينا بعض القوى الخارقة.
نهج ميكسن أساسي
لنفترض أن لدينا التصميم التالي:
<body class="theme-1"> <div class="container"> <div class="left"> Left </div> <div class="right"> Right <button class="button">Button</button> </div> </div> </body> </html> لقد طُلب منا إنشاء سمات متعددة لذلك. يجب أن يتغير الموضوع ألوان جميع الحاويات (بما في ذلك الحاوية الرئيسية) والزر ، وسيتم تحديد المظهر بواسطة فئة في الجسم ، أو يمكن أن يكون حاوية "خارجية" أيضًا:
<body class="theme-1">دعونا نبني مزيجًا يسمى "themeable" والذي سيحتوي على مخطط الألوان الخاص بنا كمعلمات.
@mixin themable($theme-name, $container-bg, $left-bg, $right-bg, $innertext, $button-bg) { .#{$theme-name} { .container { background-color: $container-bg; border: 1px solid #000; display: flex; height: 500px; justify-content: space-between; margin: 0 auto; padding: 1em; width: 50%; * { color: $innertext; font-size: 2rem; } .left { background-color: $left-bg; height: 100%; width: 69%; } .right { background-color: $right-bg; height: 100%; position: relative; width: 29%; } .button { background-color: $button-bg; border: 0; border-radius: 10px; bottom: 10px; cursor: pointer; font-size: 1rem; font-weight: bold; padding: 1em 2em; position: absolute; right: 10px; } } } }ثم استخدمه لإنشاء سماتنا:
@include themable(theme-1, #f7eb80, #497265, #82aa91, #fff, #bc6a49); @include themable(theme-2, #e4ada7, #d88880, #cc6359, #fff, #481b16); في هذه المرحلة ، وفرنا الكثير من الوقت بالفعل ، ولكن هناك بعض المشكلات في هذا النهج:
تحتوي السمات عادةً على الكثير من الخصائص المختلفة بجانب الألوان. على سبيل المثال ، إذا أردنا تعديل سمة Bootstrap ، فسيكون من الصعب الحفاظ على كتابة مزيج باتباع "الوصفة" السابقة ويصعب قراءة الكود. بالإضافة إلى ذلك ، نحن لا نتبع أفضل ممارسات Sass - على سبيل المثال ، إدخال أكواد الألوان السداسية مباشرة في المزيج.
تصميم مخطط الأنماط باستخدام خرائط Sass
بمساعدة الخرائط ، التي تشبه بشكل أساسي المصفوفات المفهرسة الرئيسية ، يمكننا بناء مجموعة أنماط أكثر دلاليًا وذات مغزى لموضوعنا ، والتي سيكون من السهل الحفاظ عليها وفهمها من قبل زملائنا المطورين. يمكننا استخدام القوائم أيضًا ، لكنني شخصيًا أجد الخرائط أكثر ملاءمة لهذا الغرض. لا تحتوي القوائم على مفاتيح بينما تكون المفاتيح قابلة للشرح ذاتيًا.
ستكون خريطة نهجنا الجديد عبارة عن خريطة متداخلة :
$theme-1: ( container: ( bg: #e4ada7, color: #000, border-color: #000 ), left: ( bg: #d88880, color: #fff, height: 100%, width: 69% ), right: ( bg: #cc6359, color: #fff, height: 100%, width: 29% ), button: ( bg: #481b16, color: #fff ) ); إذا أردنا الوصول إلى كل قسم من theme-1 مخططنا -1 وخرائطه الفرعية ، فإننا نستخدم التوجيه @each خلال كل منها:
@each $section, $map in $theme-1 سيعيد $section مفتاح القسم الحالي ، $map المتداخلة التي تتوافق مع هذا المفتاح.
بعد ذلك ، يمكننا الوصول إلى خصائص كل خريطة ، دعنا نقول خاصية background (bg) ، باستخدام وظيفة map-get :
map-get($map, bg)أخيرًا ، بدمج المزيج الجديد الخاص بنا ، بناءً على هيكل خريطتنا ، يمكننا إنشاء العديد من السمات كما نرغب:
@mixin themable($theme-name, $theme-map) { .#{$theme-name} { .container { .left, .right { font-size: 2rem; } } .container .right { position: relative } .button { border: 0; border-radius: 10px; bottom: 10px; cursor: pointer; font-size: 1rem; font-weight: bold; padding: 1em 2em; position: absolute; right: 10px; } // Loop through each of the keys (sections) @each $section, $map in $theme-map { @if ($section == container) { .container { background-color: map-get($map, bg); border: 1px solid map-get($map, border-color); display: flex; height: 500px; justify-content: space-between; margin: 0 auto; padding: 1em; width: 50%; } } @else { .#{$section} { background-color: map-get($map, bg); color: map-get($map, color); @if ($section != button) { height: map-get($map, height); width: map-get($map, width); } } } } } } @include themable(theme-1, $theme-1); @include themable(theme-2, $theme-2); … … لاحظ أننا نستخدم أيضًا التوجيه @if لتمييز خصائص الأقسام التي ليست أزرارًا.
@if ($section != button) { height: map-get($map, height); width: map-get($map, width); }بهذه الطريقة ، يمكننا إضافة خصائص مختلفة لبعض الأقسام لإنشاء خصائص محددة أو حتى قواعد ، أو يمكننا التمييز بين مفتاح بقيمة واحدة من الآخر مع خريطة متداخلة.
يمكن أن يتكون موضوعنا أيضًا من العديد من الخرائط المستخدمة بواسطة العديد من عمليات المزج ، ويتم تطبيقها في أجزاء مختلفة من ورقة الأنماط الخاصة بنا. كل هذا يتوقف على مدى تعقيد تخطيطنا الأساسي وبالطبع نهجنا الشخصي.
مزيد من التحسين
يقدم Sass وظائف مضمنة مفيدة لتوفير المزيد من العمل ؛ على سبيل المثال ، يعمل hsl مثل lighten أو darken لحساب ، على سبيل المثال ، لون الزر عند التمرير فوقه.
يمكننا تعديل رمز الزر لتفتيح خلفيته عند التمرير ، بغض النظر عن لون الخلفية الأصلي. بهذه الطريقة ، لا يتعين علينا إضافة لون آخر لهذه الحالة.
@if ($section != button) { height: map-get($map, height); width: map-get($map, width); } @else { &:hover { background-color: lighten(map-get($map, bg), 20%); } }أيضًا ، باستخدام وحدات Sass ، يمكن أن تكون التعليمات البرمجية الخاصة بنا أكثر وضوحًا وقابلية للتوسع ؛ يمكن احتواء كل خريطة سمة في وحدة نمطية ثم استيرادها إلى ورقة الأنماط الرئيسية الخاصة بنا.
@import 'theme-1'; @import 'theme-2'; @import 'theme-3'; … … @mixin themable($theme-name, $theme-map) { .#{$theme-name} { .container { … …سيتطلب ذلك وضع الوحدات في المشروع على النحو التالي:
/ ├── _theme-1.scss ├── _theme-2.scss └── _theme-2.scss
إذا كنت مهتمًا بمعرفة المزيد حول استخدام Sass لتجفيف CSS ، فإن زميلك Toptaler Justin Brazeau و Sass المتحمسين يناقشان هذا فقط في مقالته الرائعة Sass Mixins: Keep Your Stylesheets DRY .