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

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

لاحظه: كل الاكواد الجايه و الامثله مكتوبه 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 في الحاله دى ، هيتم عمل الريندر و دا موش حاجه كويسه ، و لغطبة ملفات.

استيراد في فايل تانى. المشكله دى حلها استخدام الجزئيات اللى ساس بيدعمها .. ببساطه لو مثال لو هو اسمه اسمه 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 كلها. بس دى موش نهايه العالم! انا شرحت بس اليك باسرع وقت ممكن

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

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

دمتم سالمين.

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

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

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

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

خرائط المفاهيم هي أدوات رسومية لتنظيم وتمثيل المعرفة. وهي تشمل مفاهيم ، عادة ما تكون محاطة بدوائر أو مربعات من نوع ما ، والعلاقات بين المفاهيم المشار إليها بواسطة خط ربط يربط بين مفهومي. تأشيرة ...

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

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