السلام عليكم، إن شاء الله تكونو بخير ..

فى البوست: ابدء ساس وبوصلة اليوم! [ج 1]. اتعرفنا على اللغه ، اتعرفنا ازاى نشغلها على الجهاز الخاص في البوست دا ، هنتكلم عن امكانيات sass و Compas و ازاى تستغلها بشكل عام. إذا كنت تتش قريت البوست الأول ، ياريت

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

1. المتغيرات - المتغيرات:

كل ما عليك فعله هو المتغيرات في أي لغة أخرى.

$ font-stack: Helvetica، sans-serif؛ اللون الأساسي $: # 333؛ body {font: 100٪ $ font-stack؛ اللون: $ اللون الأساسي. }

دا فى الريندر هيكون بالشكل التالى:

body {font: 100٪ Helvetica، sans-serif؛ اللون: # 333 ؛ }

طبعا مدى التطبيقات اللى ممكن تحدد اصلا الجايدلاينز للبراند لموقع اللى بتعمله وقت ما هتعمل تغيير هيتأثر الكل بيه ، ودا لوحده ميزه موش قليلة.

2. تداخل او التعيشيش!

المقصود بال Nesting ، هو انى احلى المثال اللى

div # theID> a {display: none؛ }

دا طبعا بيفيدنى. في حالات كتير احنا بنشتغل بالطريقه. لا يُعتمد على مستمع فريد. الموضوع فى SCSS ابسط مما تتخيل .. دا مثال للكود:

div # theID> nav {ul {margin: 0؛ الحشو: 0؛ نمط القائمة: لا شيء ؛ } li {display: inline-block؛ } {عرض: كتلة ؛ الحشو: 6px 12px. زخرفة النص: لا شيء ؛ }}

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

div # theID> nav ul {margin: 0؛ الحشو: 0؛ نمط القائمة: لا شيء ؛ } nav li {display: inline-block؛ } التنقل في {display: block؛ الحشو: 6px 12px. زخرفة النص: لا شيء ؛ }

الجزء دا من ساس يمكن استخدامها في حجات لا ، لها.

3. Partials او الجزئيات:

كلنا قبل كده في الجزء الأول من مقالتك الأولى ، هل أنت بحاجة لتحديث أم لا ، هل أنت بحاجة لتحديث فولدر ، كل ملفات ال SCSS اللى فيه يجري معالجتها و حفظها في فولدر تانى ك؟

دا معناه ان فايل .scss في الحاله دى ، هيتم عمل الريندر و دا موش حاجه كويسه ، و لغطبة ملفات.

استيراد في فايل تانى. المشكله دى حلها استخدام الجزئيات اللى ساس بيدعمها .. ببساطه لو مثال لو هو اسمه اسمه template.scss هخلى بس اسمه _template.scss ، بالطريقه دى ساس موش هتعالج الملف دا اصلا ، الا انت انت عامله استيراد داخل ملف تانى فقط.

4. استيراد او الإستيراد:

سوف موجوده فى CSS في كل مره انت بتعمل فيها استيراد خلال CSS العادى. بيعمل طلب HTTP جديد. و بيع كل ملف على انه منفصل عن التانى. فى ساس الموضوع مختلف.

انت لو بتعمل خلال ملف ما ، استيراد لاى ملف تانى. sass هيريندر الملفين الاساسى و اللى معمول ليه استيراد جوه الملف الاساسى .. اى انه هيعمل طلب HTTP واحده فقط.

دا مفيد فى بعض المشاريع. اللى بتكون قسم من الملفات الخاصة بك

5. خلطات او المزج:

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

mixin margin ($ top، $ right، $ bottom، $ left) {margin-top: $ top؛ الهامش الأيمن: $ اليمين ؛ الهامش السفلي: $ السفلي ؛ الهامش يسار: $ اليسار ؛ } .box {include margin (10px، 20px، 30px، 40px)؛ }

هل هي القيم العليا ، اليمين ، أسفل ، اليسار ، وقلتله؟ بعدين طبقته على مربع ، بالترتيب اللى انا كاتبه فى اليكسن ، و القيم اللى انا كاتبها فى الانكلود الخاص بيه ، فالناتج هيكون كالتالى ..

.box {margin-top: 10px؛ الهامش الأيمن: 20 بكسل ؛ الهامش السفلي: 30 بكسل ؛ الهامش الأيسر: 40 بكسل ؛ }

مثال بسيط للى ممكن تعمله بالميكسن، عاوز تنتقل بتفكيرك لدرجه تانيه؟ جربت تشوف bourbon.io

6. تمديد / وراثة او التوريث:

النقطه دى هتغير استخدامك بالكامل فى مناطق كتير

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

فى ساس انا بنادى على الكلاس، جوه الكلاس التانى! و بيكتبلى هو ال CSS !! لا موش بس كده ، ساس موش بيعه كتابه اسطوانة الخصائص في كل مره انا بنادى فيها او بورث فيها Class للتانى! لا .. هو بيجمعلى كل المناطق الضعيفة ، وبيتبكلي الكود. خلينا نشوف

.message {border: 1px solid #ccc؛ الحشو: 10px. اللون: # 333 ؛ } .success {extend .message؛ لون الحدود: الأخضر. } .error {extend .message؛ لون الحدود: أحمر. } .warning {extend .message؛ لون الحدود: أصفر. }

هيكون الريندر الخاص بيه بالشكل دا ..

.message ، .success ، .error ، .warning {border: 1px solid #cccccc؛ الحشو: 10px. اللون: # 333 ؛ } .success {border-color: green؛ } .error {border-color: red؛ } .warning {border-color: yellow؛ }

لسه مخلصناش .. ولاحظ أن هذا هو الحال في سكي.

٧.المشغلين

من سيات بريسه ، في سيل سرفيس ، في المقابل ، في سيالك بِسْ كأنك بتكتب كود عادى جدا .. دا مثال:

. حاوية {العرض: 100 ٪ ؛. } مقالة [role = "main"] {float: left؛ العرض: 600 بكسل / 960 بكسل * 100٪ ؛ } جانبا [دور = "مجاني"] {float: right؛ العرض: 300 بكسل / 960 بكسل * 100٪ ؛ }

دا هيكون الريندر الخاص بيه كالتالى:

. حاوية {العرض: 100 ٪ ؛. } مقالة [role = "main"] {float: left؛ العرض: 62.5 ٪ ؛ } جانبا [دور = "مجاني"] {float: right؛ العرض: 31.25 ٪ ؛ }

لحد كده ، احنا شرحنا كل النقط الموجود في الدوكيومنتس الخاصه ب SASS كلها. بس دى موش نهايه العالم! انا شرحت بس اليك باسرع وقت ممكن

بمعرفتك للنقط لحد هنا. انت مؤهل جدا انك تشتغل ساس من النهارده! متستناش! اشتغل النهارده و الهتخده؟ اكتر واكتر و متشبعش!

اتمنى تكونوا استفدوا 🙂

دمتم سالمين.

المزيد من القراءات ،

يتنبأ تأثير von Restorff ، المعروف أيضًا باسم "تأثير العزلة" ، أنه عند تقديم محفزات متجانسة متعددة ، من المرجح أن يتم تذكير الحافز الذي يختلف عن الباقي. [1] صاغ النظرية الطبيب النفسي الألماني و ...

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

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

استخدام الأدوات المستندة إلى الويب للكشف عن البيانات ذات الصلة إحصائياً لتحسين قابليتها للاستخدام يُمكّن فرق التصميم من الاستفادة من الأدوات المستندة إلى الويب لجمع معلومات ذات دلالة إحصائية حول ما يفعله الأشخاص على موقع الويب أو تطبيق الويب. ...

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

مقارنة نسختين من التصميم لمعرفة أيهما أفضل أداءً مقابل هدف محدد مسبقًا • يعد اختبار A / B أحد أساليب التحسين التي تسمح لك بمقارنة نسختين مختلفتين من التصميم لمعرفة أيهما يجعلك أقرب إلى العمل ...