اساسيات لغة الSASS

  • شروحات للمبتدأين
  • 28-نوفمبر-2016
  • ١٥ دقيقة

السلام عليكم

نبذة عن المدونة

ستختص المدونة ان شاء الله بعمل شروحات عن التكويد وتطوير الويب من جهه المستخدم او كما يطلق عليها Front-end Developing وسنركز علي الدروس التي تساعد المطور في مرحلة كتابة الكود و العمل علي المشاريع وليست دروس تعليمية فقط وستنقسم الدروس الي 3 انواع :

  1. شروحات للمبتدأين
  2. شروحات للمحترفين
  3. تمارين ويب

ما هي لغة الSASS :

مع تطور الويب و تعامل المطورين مع مشاريع اكبر واكثر تعقيد اصبحت CSS غير مرضيه لهم من حيث سلاسة الاستخدام و السرعه لذلك قام Hampton Catlin بإنشاء لغة SASS

SASS هي لغة مشتقة عن CSS وليست منفصله تحتوي علي بعض الخصائص الغير موجودة فى CSS مثل variables, nesting, mixins, inheritance وغيرها.

ماذا تحتاج لتبدأ باستخدام SASS:

ستحتاج الي تنصيب لغة SASS علي جهازك او استخدام Compiler للتحويل من SASS الي CSS لان المتصفح لا يفهم الا CSS اما الSASS فهى للمطورين فقط وفي هذا الامر افضل برنامجKoala : koala-app.com

خصائص SASS :

1.Variables

المتغييرات هي قيم بيتم استخدامها بشكل متكرر في المشروع بدلا من تكرراها بنقوم بإضافاتها فى متغير و نستخدم المتغير فى باقي المشروع ، كمثال :


$font-size: 12px;

.div {
     font-size: $font-size;
}

 

2.Nesting

كما نقوم اثناء كتابة كود HTML بكتابة الtag كparent elements وبداخله الtags ك child elements نستطيع ايضا بالقيام بذلك فى SASS . مثال :


nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

فيكون الناتج :


nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

 

 

3.Partials

وهي امكانية تقسم الكود علي اكثر من ملف ولكن لابد ان يبدأ اسم الملف ب “ـ” كمثال :
header.scss_

ثم استدعاء الملف :


@import "header";

ملحوظة: بعد عملية الcompiling سيتم تحويل الكود في ملف css واحد فقط

 

 

4.Mixins

وهي حفظ خصائص css باسم معين لاستخدامها اكثر من مرة مثال :


@mixin trans {
  transition: all 0.3s eae-in-out;
}

واستخدامها كالاتي :


.div:hover {
background: #f8f8f8;
color: #eee;
@include trans;
}

ويعطينا ناتج :


background: #f8f8f8;
color: #eee;
transition: all 0.3s eae-in-out;

 

5.Extend

وهي نسخ نقس خصائص الcss من class او id اخر . مثال:


.class {
padding: 0 10px;
margin: 16px;
}

.div {
background: #ffff;
border: 1px solid #d8d8d8;
@extend .class;
}

فيكون الناتج :


.class {
padding: 0 10px;
margin: 16px;
}

.div {
background: #ffff;
border: 1px solid #d8d8d8;
padding: 0 10px;
margin: 16px;
}

 

ارجو ان تكون المقالة الاولي مفيدة لكم , اراكم في تدوينات اخري

الوسوم: