باللغة العربية SASS دورة

بسم هللا الرحمن الرحم

SASS: دورة

أنس حكمت أبوحمد: تقدم

@nees.com2aneeshikmat ,: البرد اإللكترون[email protected], [email protected]

2nees.com: الموقع اإللكترون

(دورة مجانة )

نسأل هللا تعالى أن , دورة مجانة خالصة لوجه هللا تعالى

تقبل منا ومنكم خر العمل

mailto:[email protected]





الفهرس

المقدمة

ما هو الSASS

لماذا أستخدم الSASS

طرقة تنصب الSASS

بعض من الcommand line المهمة ف الcompass

مثال على استخدام الcompass والSass قبل البدأ

SASS Syntax

Data types



الفهرس

المتغرات

التداخل

Partials

Import

Mixins

Extend/Inheritance

Operators

use functionOperators &



الفهرس

If & loops

loops @for)If &)

@each))loops If &

الخاتمة





..لكريم الشاذلي ... ما لم يخبرني به أبي عن الحياة

المقدمة

اللهم , بسم هللا الرحمن الرحم.. بسم هللا الذي بحمده تتم النعم ...علمنا ما نفعنا وانفعنا بما علمتنا إنك أنت العلم الحكم

لقد أنعم هللا تعالى علنا بأن جعلنا وإاكم نستمر ف تعلم وكل لحظة من , وطلب المزد ف كل وقت , المزدنسأل هللا , واآلن نحن ف صدد تعلم موضوع جدد, حاتنا

وأن جعلنا به أقرب , تعالى أن تقبل منا ومنكم هذا العملوأذكر إخوت أنن بريء من استخدام هذا الشرح ... اله

.. ف أي عمل قد قودنا الى معصة هللا تعالى

هذه الدورة ستتكلم عن موضوع مهم جدا وشق لكل .. منهم front endوخصوصا ال , مطورن الوب



المقدمة

... لما وفر علهم من جهد ووقت وعمل ؤدي الى تقدم قوة ضخمة الى SASSإن استخدام ال

!؟ SASSما هو ال !!! وستسألن الى اآلن .. CSSال

والت .. لكن ف الشرحة التال .. سأجبك بكل تأكد بشكل مفصل قلال SASSستتحدث عن تعرف ال

وكف مكنها أن تقدم او أن تكون قوة وإضافة مهمة ..... cssجدا مع ال

*^_________ها بنا نسأل هللا تعالى أن , دورة مجانة خالصة لوجه هللا تعالى


..مالحظة مهمة جدا

ولم تكستب خبرة .. فإنك لم تتعلم .. اذا لم تطبق ما تقرأ

.. أهم ما ف عملنا هو التطبق ... جددة

...بجانبك Googleوأبق ... وطبق ... إقرأ

لكن ..لذلك األمثلة الت ستراها والموضوع سهل جدا

...لزمك التطبق التقان مزاا هذه اللغة الجملة



SASSما هو ال

cssه عبارة عن لغة تضاف كملحق ل SASSال

, مكنها أن تجعل من عملك أسرع وأقصر وأقل جهدا

cssوتطورا واحترافة من ال , وه أكثر استقرارا

وبنتها cssوتتوافق كلا مع أوامر ال , التقلدي

وتستخدم كوسلة مختصرة إلنشاء شفرات , التركبة

البرمجة وتعدم مجموعة من األمور الت cssال

غالبا ما نراها ف البرمجة مثل تعرف المتغرات أو

..الخ من األمور الرائعة ..التداخل أو تضمن الملفات



SASSما هو ال

سكون SASSأي أن أي أمر نقوم بكتابته على شكل

.. cssناتجه بكل تأكد هو

موضوع مهم SASSباإلضافة الى ذلك رتبط بمفهوم ال

.. compassجدا وهو ال

مفتوح المصدر frameworkهو compassوال

فهو .. cssال ( generation)ستخدم لغاات انشاء

الى SASSالوسط الذي سقوم بترجمة الشفرة من

CSS ...



SASSلماذا أستخدم ال

لماذا أستخدم ال .. وبعد الذي تكلمنا عنه .. والسؤال الىن SASS .. أو لماذا ال أكتف فقط بالCSS..

..والجواب هو معقد .. كون غالبا كبر.. cssالذي كون styleأن ملف ال

وهذه األمور تجعل من التعدل أمر .وصعب التتبع ....صعب .. أقل تعقدا .. cssفهو أقل حجما من ال .. sassبنما ال

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

واآلن لنذهب لنتعلم طرقة ..SASSاذا لهذا نستخدم ال .. SASSتنصب ال



أنس حكمت أبوحمد

.. مالحظة مهمة

وه عملة .. قدتكون البداة اآلن أصعب ما مكن

وخصوصا أول .. compassوال SASSتنصب ال

وأنه إن .. لكن تأكد صدق أن العملة سهلة .. مرة

واجهتك أي مشاكل مكنك اجاد الحل مباشرة على

بنجاح SASSلكن بعد قامك بتحمل ال .. اإلنترنت

وعند البدئ بكتابة ال .. ستشعر بفرحة كبرة جدا

SASS فإنك ستكره كتابة الcss بالطرقة التقلدة..



(ابن الهثم)علماء عرب أو مسلمون

:بعض من انجازاته

نجححا ابححن الهححثم وهححو بمصححر فحح تطححور علححم البصححرات بشححكل ( 1جذري حن برهن راضحا وهندسحا علح أن العحن تبصحر وتحري بواسطة انعكاس اإلشاعات من األشاء المبصرة عل العن ولس

.بواسطة شعاع نبثق من العن إلى األشاء

برهن ابن الهثم راضا وهندسحا علح كفحة النظحر بحالعنن معحا (2إلى األشاء ف آن واحد دون أن حدث ازدواج ف الرؤة برؤحة الشء شئن وعلل ابحن الهحثم ذلحك بحأن صحورت الشحء المرئح تتطابقان علح شحبكه العنحن وقحد وضحع ابحن الهحثم بهحذه البرهنحة

.وذلك التعلل األساس األول لما عرف أالن باسم االسترسكوب

أول محححن درس العحححن دراسحححة علمحححة وعحححرف أجزاءهحححا وأسحححامها (3وتشرحها ورسمها



(ابن الهثم)علماء عرب أو مسلمون

4) أول من أطلق عل أجزاء العن أسماء آخذها الغرب بنطقها أوالقرنة والشبكة والسائل : ترجمها إلى لغاته ومن هذه األسماء

.الزجاج والسائل المائ

5) أول من أجرى تجارب بواسطة الة الثقب أو البت المظلم أوالخزانة المظلمة واكتشف منها أن صورة الشء تظهر مقلوبة داخل هذه الخزانة فمهد بهذا الطرق إلى ابتكار الة التصور

" وبهذه الفكرة وتلك التجارب سق ابن الهثم العالمن اإلطالن .بخمسة قرون" ودال بورتا " " لوناردو دوفنشى

6) وضع ابن الهثم والول مرة قوانن االنعكاس واالنعطاف فعلم الضوء وعلل النكسار الضوء ف مساره وهو االنكسار الذي

حدث عن طرق وسائط كالماء والزجاج والهواء فسبق ابن .الهثم بما قاله العالم اإلنجلزي نوتن



SASSطرقة تنصب ال

قم بالدخول الىlang.com/install-http://sass

ستجد هناك طرقتان لتنصب الSAS والعمل عله ..لذلك .. command lineوأنا شخصا أفضل ال

Commandسأختار هنا ف هذا الشرح المتواضع ال Line ..

ستجد هناك شرحا مفصال لطرقة تنصب الSASS .. Rupyوالحظ أنك ستحتاج الى .. على كل نظام

..كمثال windowsوسنقوم بتحمله على

ف الwindows ستجد هناك رابط (ruby installer )



http://sass-lang.com/install



http://www.rubyinstaller.org/




قم بالضغط علىdownload .. وقم باختار اإلصدار

فضل اإلختار من أجدد ..)وقم بتنصبه ..المناسب لك

( اصدارات 3

ثم بعد التحمل قم بتنصب الملف بالطرقة التقلدة

.. على الجهاز ..

بعد ذلك قم بالضغط علىstart ومن ثم قم بكتابة

الحظ الصورة ...ف شرط البحث commandاألمر

..ف الشرحة التالة






بعد عملة النقر علىrupy command .. علك

وذلك عن .. Compassوال SASSاآلن بتنصل ال

..طرق كتابة األوامر التالة

gem install sass( أ

gem install compass( ب

sassسقوم بتنصب كل من ال ..بعد كتابة كل أمر منهم

وحتى تارخ .. بأحدث اصدارتهم compassوال

رقم bugفإنه اذا وجد ..كتابة هذه الدورة المتواضعة

..ف آخر نسخة قم بكتابة 897




uninstall sass

uninstall compass

...وبعدها قم بتحمل هذان اإلصداران منهما

gem install sass --version "3.2.10"

gem install compass --version "0.12.2”

compassوال SASSوبذلك نكون قد انتهنا من تحمل ال بعض من ال .. واآلن ننطلق الى نقطة أخرى وه

command line المهمة ف الcompass والت.. cssالى sassسنستخدمها للتحول من




.. واآلن للتأكد من األمور تسر بالطرق الصحا

ال موجودة pathالى commandقم بتغر مسار ال

ومن ثم قم .. wwwف المشارع الخاصة فك مثال

ompassبكتابة األمر التال create sass-test

.. غر هك ..فهذا عن إنو األمور تمام .. اذا تم اإلنشاء

حتى ترى ما هو الخطأ .. بامكانك االستعانة بجوجل

..وبعدها تابع معنا .. ال قد حصل معك

compassالمهمة ف ال command lineبعض من ال

ولكنن compassوجد هناك العدد من أوامر ال :أوامر وه 3سأكتف بذكر

1 )Compass watch : هو أهم أمر أو أكثر ..ومبدئا..أمر سنستخدمه ف كتابة برامجنا

بمجرد حدوث أي تعدل ..هذا األمر قوم فتا جلسة موجود داخل المشروع فإنه SASSعلى أي ملف

علما أن التعدل كون ..مباشرة cssسقوم بتحوله الى فقط على الجزء الذي تم اضافته أو حذفه أو تعدله

وهذا األمر ( وبشتغل... عن بتبع ون صار تغر )... مهم جدا ف أثناء مرحلة التطور للمواقع




2 )Comass compile : ستخدم هذا األمر إلنشاء ال

css كود من الSASS عن مش ..)بطرقة دوة

وإنما عندما .. بشكل تلقائ عند حدوث أي تغر عدل

(.رد المطور ذلك

3 )Compass help : بهذا األمر مكنك معرفة أغلب

أوامرها أو compassالمعلومات الت تهمك عن ال

.. أي أمر آخر




,compass {cleanباإلضافة الى ما ذكرنا فهناك ال

create, validate, …etc} الخ من هذه األوامر

..مكنك االطالع علها من هنا

Compass Command line



Compass help ------<

http://compass-style.org/help/tutorials/command-line/

مالحظة

تمكنك من netbeansلل plug-inمكنك اضافة

مع خصائص األلوان وال sassاستخدام ال

autocomplete باإلضافة الى العدد من امكانات

ولكن شترط أن كون االصدار أكبر ..المحرر الرائعة

.. اآلن 8وفضل استخدام ال .. 7.3أو ساوي

... SASSكود ولس Cssوبذلك ستشعر أنك تكتب





كتاب االسالم ما هو؟.. الدكتور مصطفى محمود رحمه هللا

قبل البدأ Sassوال compassمثال على استخدام ال






compass watchوقمت بعمل x.sassعلى فرض SASSانتبه أنه لو وجد ملف

واذا وجد ملف .. هذا CSSفإنه سيقوم تلقائيا بانشاء ملف ال cssولم يكن هناك ملف

css وكان ملف ال

Sass يختلف نتائجه عن الcss فينتجoverwrite للcss الموجود ووضع التعديالت

..الجديدة عليه




باستثناء .. cssوكما تالحظ فهي تشبه ال SASSهذه الشيفرة كتبت باستخدام ال

وسيتم شرح ذلك بإذن هللا ..داخل بعضهم البعض classوال idأنني قمت بوضع ال

سترى كيف ..وانظر الشريحة التالية .. ولكن اآلن انظر الى هذه الشكل ...تعالى

..سيكون ناتج التفيذ الخاص به




وأخذنا ..بهذا نكون قد انتهنا من الجزء األول .. اآلن

وال تنسى أنك بحاجة الى .. فكرة عامة عن الموضوع

لك ترى compassأو SASSأن تقوم بالدخول الى

..المزد من النقاط الت لم سعنا ذكرها

.. SASSبخصوص ال .. واآلن سأذكر نقطة مهمة جدا

..انظر الشرحة التالة

SASS Syntax

أو باألحرى االمتداد لملف ال SASSلحفظ ملفات ال

SASS قسم الى جزئن أو شكلن ..

وهو الذي استخدمته ف المثال السابق . SCSSاألول هو

أو داخل command lineداخل ال ..ان الحظت ذلك

css ..

الخاص syntaxوهذا اإلمتداد وال SASS.والثان هو

وهذا مؤكد ..وهناك فروق بنهما ... به لم استخدمه هنا

^_______^فال وجد شء صنع عبثا



SASS Syntax (SCSS, SASS)

وتشابه ال .. CSSمكن استخدام هذه ك : SCSS: أوال

CSS .. وتدعم الCSS# باإلضافة .. بجمع أنماطه

vindoerوال hackدعم ال SCSSالى ذلك فإن ال

أن Syntaxوال تنسى أن ما مز هذا ال ... الخ ...

بجمع CSS3وال CSSدعم جمع خصائص ال

... أنماطها

SCSS.وكل ما علك فعله الستخدامه هو جعل الملف

MySCSSFile.SCSSمثل




:أما الثان

.. SASSفه الصغة القدمة من ال .. SASSفهو ال السابق بأنها Syntaxوهذه الخاصة تتمز عن ال

باإلضافة الى ذلك ... أبسط وأقل اجازا من سابقتها الى مسافة بادئة فقط عند .. Bractsفإنها تستبدل ال

واألسطر بدال من الفاصلة المنقوطة .. وجود تداخل ولكل من .. البعض ختلف مع انها أبسط .. ) الخ ..

وشخصا أستخدم ال ..وجهات النظر ما ؤدها SCSS ... ) ... لتمز هذا النوع كل ما علك فعله هو

...SASS.وضع امتداد الملف




:مالحظة

وف SASSوأنما ذكر ..ف أي مكان داخل هذه الشرائا

وجميع ..فإنه يقصد به هو اسم اللغة .. أي مثال

... SCSS.األمثلة التي ستراها





للطيب بوعزه ..كتاب نقد الليبرالية

... !!اآلن

ولننطلق ونتعلم القواعد الخاصة ... SASSلنبدأ معا بالتعرف على ال

.... بهذه اللغة الت تعد اضافة رائعة لمطورن ومصممن الوب

^_^



Data Types

هناك أنواعا مختلفة من البانات والت مكن استخدامها

:وه SASSداخل ال

...5px ,1,2,3: مثل... األرقام 1)

”“ qoutesمع ( بجزئها أ( string)النصوص 2)

”“بدون ( ب

”anees, ahmad, moath, “ali”,”saed: مثل

( ج ff0000#( ب red( مثل أ.. األلوان 3)

rgba(10,20,30);



Data Types

booleans :true/falseال ( 4

5 )nulls : مثلnull

6 )list : وتكون عبارة عن مجموعة من القم المتتالة

..والت تفصلها فاصلة أو فراغ

1px 5px 4px, arial, sens-serf: مثل



المتغرات

هو ادخال SASSمن الخصائص الرائعة جدا جدا داخل ال لطالما تمنت .. مجازا CSSالمتغرات الى عالم ال وذلك ألن المتغرات .. CSSوجود المتغرات ف ال

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

فهو جعل من الشفرة البرمجة أكثر سهولة للقرائة .. ذلك ..

:color_red$أستطع كتابة .. FF0000#فبدال من كتابة #ff0000 ... أنن بمجرد قرائة اسم المتغر .. الحظ

واذا أردت تعدل هذا .. استطع ان اعرف انه لون أحمر ... فقط سأقوم بتعدل قمة المتغر .. اللون



المتغرات ..واآلن لنرى مثاال عملا



المتغرات ...واآلن ستقول ما الفرق

وثانا سهولة التعدل والتحدث ..الحظ أوال سهولة القرائة

باإلضافة الى امكانة التحكم ووضع .. وصانة األخطاء

مثل ..واستخدامها كثوابت للموقع ككل ... أكثر من متغر

الخ...الوان الروابط واألزرار

تتم عن طرق ..فإن طرقة تعرف المتغر ..وكما الحظت

ومن ثم ( ..PHPكطرقة تعرف متغر ... )$ وضع

...ومن ثم القمة الت سأقوم باستخدامها ..نقطتن



التداخل

CSSعن ال SASSإن من أروع المزاا الت تمز ال وهذه أكثر خاصة نستخدمها بال .. ه مزة التداخل

SASS ...

!!ماذا أقصد بالتداخل .. وأنت تتسائل اآلن

Html codeلك أجب على سؤالك سأقوم بوضع ... والحظ ..

هذا الشكل هو ما

..قصد بالتداخل



التداخل

وال CSS codeه عملة تضمن ال .. SASSوبال

css selector وبشكل ... بداخل بعضهم البعض

cssوقوم بتحوله الى .. compassستطع فهمه ال

...الحظ المثال التال



التداخل ..الحظ ودقق ف المثال السابق

الحظ .. menuإن المثال السابق مثل عملة تصمم

navفمثال أوال قمت بوضع .. كف قمت بالتسلسل ..

فإنه وجد ..بعد ذلك .. وقمت بإعطائها خصائصها

لها خصائص أضا .. ulهذه ال .. nav ..ulداخل ال

^_^...الحظ شكل المخرجات اآلن ..وهكذا ...



التداخل وتوقع نتائجه ..الحظ اآلن التداخل : على التداخل 2مثال



التداخل^_^ >-.. SASSناتج ال : على التداخل 2مثال



الحظ كف أمكنن التحكم بالتداخل باسلوب

..والحظ النتائج.. سهل وممتع وأسهل للتبع

aعندما قمت بوضع ال .. SASSوانتبه الى

^_^..وانظر النتائج .. ف مكانن مختلفن

تعد طرقة التداخل من أفضل الطرق لتنظم

... cssملف ال

اللهم صل وسلم وبارك على أكرم خلقك سييدنا محميد صيل هللا

...وعلى آله وصحبه وسلم .. عليه وسلم

وهللا أكبر ... وال اله اال هللا ...والحمد هلل ..سبحان هللا

..سبحان هللا العظيم .. سبحان هللا وبحمده

وأشيييييهد أن محميييييدا عبيييييدك ... أشيييييهد أن ال اليييييه اليييييى هللا

...ورسولك



Partials– تجزئة ملف الSASS

قلنا .. SASSأحب أن تعرفه عن ال ..هناك أمر رائع وبسط وجعل العمل أسهل ..من أهم مزااه التنظم SASSأن

..وهذه الخاصة تدعم هذا القول أضا ..وأسرع

الى قطع ملفات SASSتجزئة ملف ال .. Partialsقصد بال ل Partialsمثل وضع ... CSSتحتوي القلل من ال

reset ال بنستخدمو ف الcss كل أول ملف ...

عبارة عن قطع من الملفات فإنه partialsبما أننا قلنا أن وسأقوم بعمل جلب لهذا .. ستكون على شكل ملف منفصل

...وبعد ذلك تنفذ ما بداخله .. الملف وتحمله




....وهنا ستتراود لنا العدد من األسئلة حول هذا الموضوع

هو..وأهم ما ستوارد ف ذهننا من أسئلة

^_^ العادي SASSكف مكنن التمز بن ملف ال 1)SCSS.ألن اإلثنان سكونان ! .. ؟ Partialsوملف ال

ألنه .. Serverهل سشكل هذا األسلوب عبئا على ال 2)ف كل مرة لجلب ملفات ال requestسحتاج الى

SASS ؟ .. !ورجائا .. واآلن سأجب عن هذان السؤاالن المهمان

..انتبه لما ستم ذكره




فإنه وجد قاعدة تتبع لكتابة اسم الملف .. بالنسبة للسؤال األول ثم ..قبل اسم الملف _وهو وضع .. partialsالذي كون

..اإلسم واإلمتداد

reset.scss_: مثالوبهذا نكون وبكل بساطة أجبنا عن السؤال األول بحمد هللا .. ..واآلن الى السؤال الثان والمهم ...

علك أن تعلم صدق أن المتصفا ال ستطع قرائة ملفات ال SASS ... وستطع قرائة ملفات الcss .. لذلك فإن

CSSوإنما ملفات ال SASSالسرفر ال ستدع ملفات ال

....نسأل هللا تعالى أن , دورة مجانة خالصة لوجه هللا تعالى



.. requestلحن عمحل لهحا SASSوهذا عنح أن ملفحات ال

requestوإنمحححا سحححكون ال ..محححن السحححرفر السحححتدعائها

سحتتحول ..ولكحن ..حسنا ..وهنا ستقول .. cssلملفات ال

requestوبذلك سكون ال .. cssالى ملفات SASSال

ولكححن .. سححأقول لححك أنححت علححى حححق ..!! cssلملفححات ال

تتحححول الححى كححود ..هححذه partialsهحح أن ال ..المفاجححأة

css وبهححذا فإنححه .. فحح الصححفحة التحح عمححل اسححتدعاء لهححا

.. SASS Partialsسححححكون عنححححدك أكثححححر مححححن صححححفحة

وهنا أجمل محا فح األمحر .. ^_^ ....واحدة cssوصفحة

*^_____الحظ اآلن المثال التال .. نسأل هللا تعالى أن , دورة مجانة خالصة لوجه هللا تعالى





partialsفإنه تم جلب ملف ال .. وبهذا وكما الحظت

وبهذا لن .. ووضعه بنفس الملف الذي اتدعناه به

^_^ requestكون هناك أكثر من

وه ال ^____^ واآلن لننطلق الى نقطة جددة

import ...^_^

عن أبي هريرة رضي هللا عنه أن رسول هللا صلى هللا

عليه وسلـم قال

و من سلك طريـقـا يلتمس فيه علما سهل هللا له طريقا

به إلى الجنة

ـ رواه مسلم ـ



Import

ننتقل لل بعدو ..واضحة ...خلص ....^_^ importال

*_: ... *P ..

ف الموضوع importاذا الحظت قمت باستخدام ال

!لماذا قمت باستخدامها ؟..وإذا كنت تذكر ... السابق

ودمجه SASSقمت باستخدامها لتضمن أو جلب ملف ال

cssوبهذا لما طلع ملف ال .. مع الملف ال كنت فه

.. طلع ملف واحد نسأل هللا تعالى أن , دورة مجانة خالصة لوجه هللا تعالى


Import

فلست .. ذك SASSواآلن أضا أرد أن أخبرك أن ال :بالطرقة التالة importبحاجة الى عمل

@import “_base.scss";

:وكف أن تقوم بعمل

@import “base";

..._بدون وضع اإلمتداد وال

قصبا على الشكل... @ الرمز importسبق ال

@import ....^_^



Mixins

ما نشعر بالملل أو التعقد من ال ... كثرا من األحان

CSS .. وذلك بسبب تعدد البادئات الت نستخدمها قبل

مثل css3وخصوصا ال cssمجموعة من أوامر ال

-webkit- -moz- .. الخ...

cssهذه الخصائص جب كتابتها جمعا لكون ال

لكنها .. الخاص بك متوافق مع جمع المتصفحات

ولهذا كان الحل بال .. ومملة .. عملة مزعجة جدا

SASS ... كم أنت رائع اSASS *$_



Mixins

تقوم هذه الخاصة على عمل المجموعات الت ستحتاجها

دون الحاجة الى .. وتحتا اسمتخدامها مرارا وتكرار

كل ما ( ..الخ.. -webkit–مثل )كتابة كل البادئات

... علك هو كتابتها لمرة واحدة

من اضافة mixinsباإلضافة الى ذلك تمكنك ال

بحث تستقبل متغرات وبهذه المتغرات .. متغرات

كم هو ..^_^ .. dynamicصبا العمل الخاص بك

^_^أمر رااااااااااااااااااااائع

..لنرى مثاال ..لتتضا الفكرة بشكل أكبر ..واآلن



Mixins



واآلن ..اله من أمر بسط .. ^_^ SASSهذا ما عله ال

..... cssلنرى ال

Mixins



اختصرت كود كبر .. ^_^ SASSأرأت ما أجمل ال

^_^.

Mixins



( 2مثال

قصيدة في فضل المعلم

فضيييييله قيييييد بانيييييا المعليييييم هيييييذا ... هللا أكبييييير كيييييل شييييييء زانيييييا

نعييم الصييبور سييلوه كييم قييد عانييا ... طييوبى لييه رجييل المواقييف إنييه

فيييي الخيييير أفنيييى عميييره إمعانيييا ... ميييا كيييان ييييركن للفتيييور وإنيييه

إن أراد بيانيييا المعليييم فضيييل ... لييييس الطبييييب وإن عيييال متنكيييرا

الشييبانا ... فالطييب منشييه هنييا عنييد الييذ شييرح الييدروس وخيير

قيادوا الجييو وأسسيوا البنيانيا ... يا أيها الباني بنيت عقول مين

وثقلت من فكر جزيت جنانا ... كم قد هديت بإذن ربي تائها



شكرا لكل معلم واستاذ أفنى عمره

... ووقته من أجلنا

Extend/Inheritance

... الوراثة

ال رتبط مصطلا الوراثة فقط ف علم األحاء وعلوم الجنوم .. ^_^لكن رتب أضا بالحاسوب ارتباطا وثقا ...

خصوصا عند وصولك الى مواضع برمجة الكنونة (Object oriented .. ) لكن هنا ف الSASS األمر

... بسط جدا جدا جد

معن ترد classوراثة خصائص SASSحث تا لك ال وفقط بكلمة واحد ... ف أي وقت .. استخدامه @extend ...



Extend/Inheritance

فإنك ستكون سعد جدا extend@عند استخدامك لل

باإلضافة الى أنك ستكون ..الختصارك الوقت والجهد

وال ..متأكد من أن صفحات الموقع جمعها موحدة

باإلضافة الى .. وجد اختالف الى اذا أردت أنت ذلك

كل .. ذلك فإنه لتعدل أو اضافة أو حذف أي خاصة

ما علك هو تغر القمة الموجودة داخل ال

@extend ... باإلضافة الى ذلك مكنك عمل

override لخاصة معنة موجودة داخل ال

@extend عن طرقclass لنشاهد مثاال... آخر..



Extend/Inheritance

ثم اسم الكالس ثم ابق على ... extend@نقوم بكتابة

على overrideأو أقوم بعمل .. الخصائص كما ه

..اي منها



الحظ أن هذا المثال

كثر ما نستخدمه

عندما نحتاج الى

طباعة رسائل

متنوعة من نظام ما

مثل الرسالة ..

االفتراضة وف

حالة التحذر والخطأ

.. والنجاح

الحظ كف أمكنن

وراثة جمع

الخصائص بسهولة

-------<

Extend/Inheritance



Operators

مكنك من استخدام SASSهل تعلم أنك باستخدام ال وناتجها كون .. العملات الحسابة ووضع معادالت

! ..؟ cssهو القمة الموجودة بال

كثر ما تفدنا هذه الخاصة ... ا له من أمر رائع فعال ^_^.. sidebarخصوصا حن تعاملنا مع ال

واآلن لنرى مجموعة من األمثلة المتنوعة على هذه سنقوم بذكر عدد من األمثلة وانت قم .. )الموضوع

(بالبحث عن المزدنسأل هللا تعالى أن , دورة مجانة خالصة لوجه هللا تعالى


Operators

.. مالحظات على الموضوع قبل البدأ

العملات هذه مكن أن تكون بن األرقام أو مكن استخدامها مع ( 1...األلوان

srtingمكن استخدام هذه الخصائص مع النصوص ( 2

أقل .. وجد هناك امكانة الستخدام العملات المنطقة مثل أكبر من ( 3...ال ساوي..من

واستدعائه ف أكثر من .. أنت قمت ببنائه functionمكنك استخدام ( 4.. مكان

*( ,/,-,+,)%العوامل الراضة الت مكن استخدامها ( 5



Operators



Operators



: عملة الجمع تسر بالشكل التال...هذا مثال على عملة جمع لأللوان

FF + 00, 00 + FF, 00 + 00 = FFFF00 .... هكذا تتم العملة هنا الناتج اللون األصفر

Operators



String operators... مثال على عملة جمع نصوص

Operators & use function



وهو امكانة تعرف .. وجد أمر رائع جدا SASSبال function .. هذا ال .. واستخدامهfunction

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

..بلغات البرمجة األخرى functionال

كل ما علك SASSداخل ال functionلتعرف ال functionثم اسم ال function@القام به هو كتابة

..فمكنك ذلك ..واذا بدك متغرات )( .. ثم

..واآلن لنرى مثاال

Operators & use function



:طلب االستزادة من العلم

قد أمرنا هللا تعالى باالستزادة من العلم وكفى بها من

وقل رب زدن : " منقبة عظمة للعلم , فقال هللا تعالى

فلو كان شء : , قال القرطب [ 114: طه" ] علما

أشرف من العلم ألمر هللا تعالى نبه صل هللا عله وسلم

.أن سأله المزد منه كما أمر أن ستزده من العلم



If & loops

أنه مكنك استخدام SASSأضا من خصائص لغة ال

SASSوبهذا تكن ال ...الجمل الشرطة وجمل الدوران

ووصال مستوى راق .. فاقت مستوات االبداع

.. وعرق

if@كل ماعلك القام به هو وضع ifولك تستخدم ال

وبداخلها ما .. {}ومن ثم الشرط الذي ترده وبعدها

>--الحظ المثال التال .. ترد أن تم تنفذه



If & loops



If & loops



.. functionعد وانتبه على ال

..فهذا مهم .. ودقق بن النتائج

واألهم من ذلك هو تطبقك العمل

^____^... على الموضوع

If & loops @for))



وسأشرح .. والموضوع الثان تحت هذا الجزء هو الدوران :عن اسلوبان مستخدمان وهما

forال ( أ each( ب

ثم for@عن طرق وضع for loopمكنك استخدام ال ( أوبعدها البداة fromومن ثم .. اسم متغر لمثل الموقع

.. {}وبعدها النهاة وبعدها throughومن ثم

هذه الخاصة من أروع الخصائص عند وجود مثال أكثر من الخ... x-1, #x-2#متسلسلة مثل classأو idعنصر لهم

@for))If & loops



... for@انظر الماثل اآلت على استخدام ال

@each))If & loops



each@إن جملة الدوران .. each@استخدام ( ب

( datatypesتذكر أل ..) listتسختدم ف حالة وجود

فه أفضل اسلوب دوران للوصول الى العناصر ..

... listالت تكون من نوع

وبعدها اسم each@ه وضع eachطرقة تعرف ال

ثم ال inثم listالمتغر الذي سحوي القمة من ال

list لنرى مثاال ..... {}وبعدها..

@each))If & loops



الخاتمة

..الحمد هلل رب العالمن .. الحمد هلل الذي بحمده تتم النعم

نكون قد انتهنا من هذه .. إخوان بهذه اللحظة الرائعة .. SASSالدورة المتواضعة ف لغة

ونسأل هللا .. نسأل هللا تعالى أن تقبل منا ومنكم هذا العمل...تعالى الرحمة والمغفرة

..اللهم اغفر ل ولوالدي وارحمهما كما ربان صغرا إنك ..اللهم اغفر ل ولوالدي وللمسلمن أحائهم وأمواتهم

..أنت الرحمن الرحم



وآخر دعوانا أن الحمد هلل رب العالمن



باللغة العربية SASS دورة

Education

Transcript of باللغة العربية SASS دورة