× عرض ! ! خصم علي خدمة برمجة التطبيقات .

ابدأ التعامل مع لغه SASS .. لجعل بيئه عملك افضل

بواسطه: admin بتاريخ: 17 أغسطس
نشر في

الويب يتطور بشكل سريع ودوري, ويجب علي مطورين الويب بشكل دائم البحث عن طرق لجعل عملهم اسرع وأذكي, سنبدأ الان بالتعرف مع تقنية تفيد في جعل عملنا أسرع واقوي.

البدء بالتعامل مع SASS

تعتبر SASS مهم لكل من يكتب CSS Code المبتدئ والمحترف , فهي تساعد المبتدئ علي عدم تكرار مشاكله وتعليمه بشكل اذكي وتقليل اخطائه بسبب خواصها المميزه, وتساعد ايضاً المحترف في تسريع العمل وجعله اقصر واذكي والإسراع في انهاء تعديلاته بشكل سريع وكتابه الكود بشكل صحيح .
  

خواص SASS

 

– إستخدام المتغيرات

في CSS بشكل عادي يمكننا كتابه التالي:

 
 
  1. .digital_creativity{
  2. color: red;
  3. }

بينما مع إستخدام المتغيرات في لغه SASS يكون كتابه الكود بالشكل التالي:

 
 
  1. $color: red
  2. .digital_creativity{
  3. color: $color;
  4. }

يفيد استخدام المتغيرات في المشاريع الكبيره والمتوسطه بحيث تقوم بتثبيت ما يتم تكراره ليتم تعديله فيما بعد بشكل سريع .

 
 

– إستخدام التفريعات

في التفريعات في CSS نقوم بكتابه التالي:

 
 
  1. .digital_creativity{color: red;}
  2. .digital_creativity .logo{color: blue;}

بينما في تفريعات SASS

 
 
  1. .digital_creativity{
  2.   color: red;
  3.   .logo{color: blue;}
  4. }

 
 

– إستخدام العمليات الحسابيه

يمكنك استخدام من خلال SASS العمليات الحسابيه الطبيعيه مثل الجمع والضرب والقسمة من خلال استخدام رموزهم – , + , / , %

 

– إستخدام التكرار .

عند كتابه كود مثلاً لـborder في css وتريد وضعه في كل جزء يمكننا عمله بالشكل التالي في css

 
 
  1. .post,.blog{border: 1px solid #eee }
  2. .post{background: #000;}
  3. .blog{background: #333}

لكن في SASS يكون الكود بالشكل التالي:

 
 
  1. .border{border: 1px solid #eee }
  2. .post{background: #000;@extend .border;}
  3. .blog{background: #333;@extend .border;}

 
 

– استخدام SASS في الريسبونسف .

في الـCSS العادي نستخدم الريسبونسف بالشكل التالي:

 
 
  1. @media only screen and (max-width: 40em) {
  2.   .digital_creativity {
  3.     width: 500px; } 
  4. }

ولكن في SASS يكون الكود بالشكل التالي

 
 
  1. .digital_creativity {
  2.   width: 300px;
  3.   @media only screen and (max-width: 40em) {
  4.     width: 500px;
  5.   }
  6. }

 
 

– استخدام mixins .

الارقام والقيم في CSS العاديه يمكنك وضعها بالشكل التالي:

 
 
  1. p {
  2.   border-color: blue;
  3.   border-width: 1in;
  4.   border-style: dashed; }

ولكن عندما نتحدث عن مشروع كبير, يوجد فيه ارقام وقيم موحدة لاجزاء مثل الـbox-shadows,font-size,border-radius

نتكلم هنا عن اهم مميزات SASS والتي توضح من خلال المثال التالي والتي يتم ترجمته لما في الاعلي:

 
 
  1. @mixin sexy-border($color, $width) {
  2.   border: {
  3.     color: $color;
  4.     width: $width;
  5.     style: dashed;
  6.   }
  7. }
  8. p { @include sexy-border(blue, 1in); }

 

يمكنك زياره موقع لغه SASS لمعرفه المزيد عن خصائصها وكيفيه عملها من هنا

 

 

 

الكلمات الدلالية

الويباجعلتقنياتاسرع


أخبار قد تهمك

هناك حقيقة مثبتة منذ زمن طويل وهي أن المحتوى المقروء لصفحة ما سيلهيه ناك حقيقة مثبتة منذ زمن طويل وهي أن المحتوى المقروء لصفحة ما سيلهي

18 أغسطس

أعمال جديدة من برمجة مؤسسة #الابداع_الرقمية

28 ديسمبر

العدد الاول 1# من اعمال المصممين العرب
Press Ctrl+C to copy the following code.
"