14 KiB
| title | localeTitle |
|---|---|
| Sass Syntax and Tools | ساس النحو والأدوات |
"فنان جيد فقط مثل أدواته."
هذا ليس صحيحًا بالضرورة ، لكن الأدوات التي نستخدمها يمكن أن تجعل حياتنا أكثر سهولة ومهامنا أكثر قابلية للإدارة. تخيل رمز الكتابة بدون اختصارات لوحة المفاتيح أو القصاصات المتاحة! ليس نهاية العالم ، ولكن يمكنك الحصول على جوهر.
إن "الأدوات" ، أو التي يشار إليها بشكل أكثر شيوعًا كتوجيهات ، سنناقشها هي ميزات مضمّنة في الواقع تأتي مع Sass ويمكن أن تساعدنا كمطورين لكتابة DRY-er (لا تكرر نفسك) ورمز أنظف.
إذا كنت ترغب في المتابعة في محرر النصوص الخاص بك ، فإنني أوصي بتركيب sass syntax . يدعم Atom و Sublime Text بالإضافة إلى بعض المحررين الآخرين هذه.
المتغيرات
إذا كنت قد كتبت رمزًا بلغة برمجة أخرى (JavaScript ، Python ، Java ، C ، إلخ.) فأنت على دراية بمفهوم المتغيرات. إذا لم يكن الأمر كذلك ، فإن المتغيرات هي في الأساس بيانات معلنة يمكن تخزين نوع من القيمة مثل رقم أو سلسلة.
في Sass ، تعمل المتغيرات بشكل أساسي بنفس الطريقة ويمكن الإعلان عنها بحرف "$" بجوار اسم المتغير:
$main-color: #CCCCCC;
يقوم المتغير أعلاه بتخزين رمز اللون ست عشري لنغمة اللون الرمادي. يمكن أن نعلن هذا المتغير داخل أي .scss أو .sass الملف الذي نعمل في أننا يمكن أن تشمل أيضا متغير إلى علامة (HTML5 العلامة، ID، والطبقة، محددات الزائفة) عند التصميم:
`$main-color: #CCCCCC;
header { background-color: $main-color; } `
في مقتطف الشفرة هذا ، قمنا بتعيين قيمة background-color الرأس إلى القيمة المخزنة $main-color ، والتي (عندما يبدأ تجميع Sass إلى CSS) على النحو التالي:
header { background-color: #CCCCCC; }
أنيق! لكن ألا يمكننا فقط تعيين background-color إلى #CCCCCC في المقام الأول؟ الجواب نعم ، ولكن هناك ما هو أكثر من ذلك.
لنفترض أننا نصمم موقعًا إلكترونيًا متعدد الصفحات لأحد العملاء ، وقد انتهينا للتو من انتقاء "نظام ألوان" بسيط يتألف من ثلاثة ألوان. شريط التنقل ، تذييل الصفحة ، لون واحد ، وربما تكون عناصر المقالة والفقرات والرؤوس أحد اللونين المتبقيين. ثم في يوم من الأيام يغير العميل رأيه في نظام الألوان الذي اخترناه ، ويريد تغييره. عظيم.
لذلك ، فإننا مكلفون بمراجعة أوراق الأنماط المتعددة (أو ربما ورقة أنماط ضخمة إذا كنت تفضل ذلك) وتغيير كل قيم الألوان هذه. ربما نمزج واحدة. أو ربما نفتقد أحدنا ونضطر إلى العودة لإصلاحها.
مع المتغيرات (واستخدام Sass parts التي سنناقشها لاحقًا) يمكننا ضبط القيم على إعلانات المتغيرات ، وفي كل مكان آخر ، استخدمنا المتغيرات في ورقة (صفحات) أنماطنا تتغير القيم لتعكس تخصيص المتغير الذي قمنا بتغييره. هذا مثال واحد فقط عن كيف يمكن أن تكون المتغيرات المفيدة عند استخدامها وفقًا لذلك في Sass. تصبح المتغيرات أكثر أهمية عندما نضيف إلى حزمة أدوات Sass الخاصة بنا.
على هذه المذكرة ، دعونا نتعامل مع المزيج.
Mixins
المزيج هو كتلة من التعليمات البرمجية القابلة لإعادة الاستخدام التي يمكن أن تأخذ الحجج ، مثل الكثير من وظيفة في جافا سكريبت يمكن. ومع ذلك ، لا يجب الخلط بينه وبين خاصية @function الفعلية في Sass.
يتم الإعلان عن المزيج من خلال إدخال حرف "@" أمام كلمة "mixin" ، ثم اسم mixin. في ما يلي مثال على مزيج يسمى btn والذي يأخذ وسيطتين ويطبقهما على خصائص CSS:
@mixin btn($color, $text-color) { background-color: $color; color: $text-color; padding: 1em; }
بعد كتابة المزيج ، لن يحدث أي شيء بشكل افتراضي لأننا لم نضع المزيج في الاستخدام (مثل كتابة وظيفة مقابل استدعاء وظيفة). دعونا دمج mixin لدينا. سيتم تضمينه في محدد button HTML5 باستخدام العبارة @include :
يسمح لنا بيان @include تصميم mixin الخاص بنا إلى محدد CSS من اختيارنا. في هذه الحالة ، يتم تمرير محدد button مع القيم الأزرق والأبيض كوسيطة.
button { @include btn(blue, white); }
وهو شيء يمكننا استخدامه في أي محدد HTML آخر إذا اخترنا ذلك. سيترجم هذا إلى:
button { background-color: blue; color: white; padding: 1em; }
فقط باستخدام السطر المفرد @include btn(blue, white); داخل محدد زرنا ، يمكننا جلب جميع التعليمات البرمجية المكتوبة داخل mixin لدينا مع الأزرق والأبيض مرت في الحجج. بالإضافة إلى ذلك ، يمكننا تعيين القيم الافتراضية للوسائط التي تم تمريرها إلى mixin. على سبيل المثال ، لنفرض أننا أردنا اختصار الزر الخاص بنا إلى لون معين ولون خط معين إذا لم يتم تمرير أي قيم عند استدعاء:
@mixin button($color: green, $text-color: red) { background-color: $color; color: $text-color; padding: 1em; }
عن طريق الكتابة في ":" متبوعًا بالقيمة الافتراضية التي نريد تعيينها ، قمنا بتعيين اللون الأخضر كقيمة افتراضية لوسيطة $color الخاصة بنا ، والأحمر كقيمة افتراضية لوسيطة $text-color الخاصة بنا.
الآن إذا كان علينا أن نطلق عليه مزيجنا دون تمرير أي قيم ...
button { @include btn; }
هذا يتجسد في:
button { background-color: green; color: red; padding: 1em; }
إذا أردنا أن نستخدم متغيراتنا مع مزيجنا ، فيمكننا القيام بذلك أيضًا:
`$main-color: #CCCCCC; $second-color: #FFFFFF;
@mixin button($color: $main-color, $text-color: $second-color) { background-color: $color; color: $text-color; padding: 1em; } `
في المثال أعلاه ، نعلن عن متغيرين بقيم لون سداسية عشري مميزة ، ثم نعين الوسيطتين $color و $text-color للإعداد الافتراضي للمتغيرات الخاصة بنا إذا لم يتم تمرير أي وسيطة.
غالبًا ما يُنظر إلى ممارسة جيدة لتحديد القيم الافتراضية للمزيج ، ولكن ليس ضروريًا بالتأكيد. ستجد أن العديد من المطورين لديهم طريقتهم الخاصة في كتابة التعليمات البرمجية والآراء المتباينة حول ما يعتبر "الأفضل".
المرح لن يتوقف هنا. هناك مجموعة جيدة من الحيل المفيدة الأخرى التي يمكننا القيام بها عند كتابة المزيج وكمية لا نهائية من الاحتمالات في كيفية كتابتها. المهم في التخلص من المزيج هو أنها تعمل كوحدات أو "كائنات" يمكن أن نعلن فيها عن أنماط معينة ، ونمرر القيم ، ونعيد استخدامها في الكود الذي نحتاج إليه ، بدلاً من تكرار أنفسنا باستمرار أثناء تصميم عناصر مختلفة. يمكن أن تساعدنا على البقاء أكثر صدقا لمبدأ جاف.
يمتد
الأداة الأخيرة التي سنناقشها هي توجيه الامتداد. يمكن استخدام الامتدادات لتكرار نمط طبقناه سابقًا على عنصر آخر. ومع ذلك ، هناك الكثير مما يحدث خلف الكواليس عند تنفيذ التمديد ، وهذا يمكن أن يؤدي إلى بعض الآثار الجانبية غير المقصودة على التصميم لدينا إذا لم نكن حذرين.
في ما يلي مثال لتوجيه التمديد الذي يتم استخدامه:
`.primary-module { color: red; }
.another-module { @extend .primary-module; }
// This ouputs the following CSS
.primary-module, .another-module { color: red; } `
لا شيء شادي جدا الذهاب هنا حتى الآن. لدينا استهداف محدد. .another-module تستخدم .another-module التصميم الذي تم تطبيقه على .primary-module . هذا يخرج تصميم color: red; يتم تطبيقها على الطبقة .primary-module و .another-module . منطقي حتى الآن وأداة لها تأثير مماثل لتشمل خلط على عدة عناصر تحتاج إلى مشاركة نفس التصميم.
الآن دعونا نلقي نظرة فاحصة على مثال مختلف ونختار أين يعقد توجيه الامتداد قليلاً:
`.primary-module p { color: red; }
.another-module { @extend .primary-module; }
// This outputs the following CSS
.primary-module p, .another-module p { color: red; } `
هل قبضتها؟ يستخدم محدد .another-module .primary-module p selector. لاحظ أنه نظرًا لأن .primary-module لها محدد .primary-module p (علامة فقرة) ، عندما يسمى التمديد ويتم تجميع كود Sass الخاص بنا ، نمط color: red; يتم تطبيقه على .primary-module p و .another-module p .
ما يحدث هو أن توجيه الامتداد ليس فقط استنساخ النمط من .primary-module p ، بل هو استنساخ علامة تحديد النسب لـ p وإضافة ذلك إلى .another-module . نحن نسخ التصميم واختيار سليل ما اقترضنا منه. ونتيجة لذلك ، يتم تطبيق النمط الذي قمنا .another-module عناصر الفقرة المنحدرة من .another-module وليس فقط على عناصر بها فئة .another-module .
يمكنك أن ترى أين يمكن أن يحدث شيء من هذا القبيل إذا لم نكن على دراية بما يفعله التمديد.
لذا فقد اتخذنا نظرة خلف الستائر على الامتداد والآن قد تفكر في ما فائدة استخدام الامتداد؟ هل يستحق كل هذا العناء أو يمكنني فقط استخدام المزيج؟
الإجابة المختصرة (هناك الكثير مما يمكن قوله حول هذا الموضوع) هي أنه غالباً ما يتم استخدام النطاق للاستفادة عمداً من وراثة الأنماط التي يتم تطبيقها على عناصر أخرى أو استخدام معين لما يُعرف بالفصول الصامتة في ساس. يمكن أن يمتد الامتداد بشكل عام لما يمكن أن يستخدمه المزيج بعناية ، ولكن لا ينبغي استخدام هذا المزيج بدلاً من استخدام آخر. يمتد التدريب ويستخدمها مع غرض معين في الاعتبار.
أما بالنسبة للدروس الصامتة ، فهذا شيء نأمل أن يتم تغطيته في قسم مقبل لهذه المقالة. لنتعرف الآن فقط على أن الصفوف الصامتة هي محددات في Sass مسبوقة بحرف "٪" ولن يتم تجميعها على الإطلاق ما لم يتم استدعاؤها بواسطة امتداد.
استنتاج
إذا كنت قد وصلت إلى نهاية هذه المقالة ، فأنت تستحق بعض التقدير. كتبت هذا على أمل تفسير ساس بطريقة أتمنى لو أنها قد علمتني عندما بدأت العبث بها. إذا كانت CSS عبارة عن شيء تتصارع معه أو كنت تشعر دائمًا بالقلق تجاه مدى السرعة التي تصبح فيها الفوضى ، فعندئذ نأمل أن يبدأ ساس في التخفيف من بعض هذه الإحباطات.
هذه المقالة تعني "دورة مكثفة" من الأنواع للحصول على رطب قدميك في عالم ساس. لا يزال هناك قدر كبير من الأدوات والميزات التي تجعل من تألق ساس ، وكذلك أفضل الممارسات عندما يتعلق الأمر بهيكلة الأنماط الخاصة بك وكسرها إلى أجزاء .
نصيحتي هي أن أقوم بوضع sandboxing في محرر النص الخاص بك وعلى Sassmeister للحصول على مزيد من الراحة مع المفاهيم التي تغطيها هذه المقالة. يمكنك أيضًا الاطلاع على مقرر Free Code Camp Sass قريبًا.
اخرج من هناك ورفع مستوى لعبة ساس الخاصة بك.