تكويد و تطوير

ابدء SASS & Compass اليوم ! [ج٢]

   -   567

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

فى البوست : ابدء SASS & Compass اليوم ! [ج١]. اتعرفنا على اللغه , اتعرفنا ازاى نشغلها على الجهاز الخاص بينا سواء ماك او ويندوز. فى البوست دا , هنتكلم عن امكانيات sass و  Compas و ازاى تستغلها بشكل عام. إذا مكونتش قريت البوست الاول , ياريت تقراه لان فيه معلومات كتير هتكلم على اعتبار انك عارفها اصلا.

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

١. Variables – المتغيرات :

مختلفتش تماما عن المتغيرات فى اى لغه تانيه , بتحدد قيمه لشئ ما , و بتبدأ تنادى عليه كل ما تحتاجه , زى مثلا :

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

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

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

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

٢. Nesting او التعيشيش !

المقصود بال Nesting , هو انى احدد مثلا ال a اللى جوه ال Div اللى الاى دى بتاعه مثلا theID , بالطريقه دى :

div#theID > a{ display: none; }

دا طبعا بيفيدنى فى إنه بيحدد تحديد جازم جدا للعنصر اللى معايا. فى حالات كتير احنا بنشتغل بالطريقه دى , خصوصا لما تكون مثلا عامل ستايل شيرد على عنصر ما , و عاوز تخصصه جوه جزء معين من الموقع , موش هتروح تضيفله class فى الجزئيه دى بالخصوص . لا بتعتمد على Unique Listener  تانى لاى عنصر , سواء كان ID او كان Class موش Shared. الموضوع فى SCSS ابسط مما تتخيل .. دا مثال للكود :

div#theID >nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

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

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

div#theID >nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

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

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

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

قولنا قبل كده فى الجزء الاول من المقال دا , ان انت بتحدد اما ملف scss و تحدد ليه ملف تانى يتعمل ليه ريندر فيه , او انه بتحدد فولدر , كل الملفات ال SCSS اللى فيه يتم معالجتها و حفظها فى فولدر تانى ك CSS ..

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

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

٤. Import او الإستيراد :

الخاصية موجوده فى CSS عادى, بس هنا احنا بنتكلم على أداء. فى كل مره انت بتعمل فيها Import خلال CSS العادى. بيعمل HTTP request جديد . و بيعامل كل ملف على انه منفصل عن التانى. فى SASS الموضوع مختلف.

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

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

٥. Mixins او المزج :

واحده من افضل الامكانيات على الاطلاق فى SASS , ال Mixins فى SASS قريبه جدا ل Function فى PHP مثلا! الفكره نفسها , انا بعرف ميكسين . و بديله بعض القيم . و بستخدمها جوا الميكسين نفسه. فى اللى جاى مثال بسيط على دا.

@mixin margin($top, $right, $bottom, $left) {
  margin-top: $top;
  margin-right: $right;
  margin-bottom: $bottom;
  margin-left: $left;
}

.box { @include margin(10px,20px,30px,40px); }

فوق انا عرفت ميكسن و قولتله انه هياخد اربع قيم , هي top , right, bottom, left , و قولتله انه هيستخدم القيم دى فى margin لل top و ال right الخ. بعدين طبقته على box , بالترتيب اللى انا كاتبه فى ال mixin , و القيم اللى انا كاتبها فى الانكلود الخاص بيه , فالناتج هيكون كالتالى ..

.box {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

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

٦. Extend/Inheritance او التوريث :

النقطه دى هتغير استخدامك بالكامل فى مناطق كتير جدا من الكود بتاعك لل shared class ..

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

فى SASS انا بنادى على الكلاس , جوه الكلاس التانى ! و بيكتبلى هو ال CSS !! لا موش بس كده , SASS موش بيعيد كتابه اسطر الخصائص فى كل مره انا بنادى فيها او بورث فيها Class للتانى ! لا .. هو بيجمعلى كل المناطق اللى انا عملت فيها توريث للكلاس دا , و بيكتبلى الكود بطريقه جميله جدا متجمع ودى موش موجوده فى LESS و دى من اكتر الحجات اللى خليتنى اتحول من LESS ل SASS لانها بتفرق كتير فى جوده الكود. خلينا نشوف مثال :

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

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

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

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

٧.Operators او العمليات :

من المميزات الجميله جدا فى SASS برده , انه بيعمل عمليات كتير جدا حسابيه ليك , فى المقابل فى ال CSS فى CALC بس هنا العمليات الحسابيه بتكون من غير اى حاجه خالص. كأنك بتكتب كود عادى جدا .. دا مثال :

.container { width: 100%; }

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complimentary"] {
  float: right;
  width: 300px / 960px * 100%;
}

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

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complimentary"] {
  float: right;
  width: 31.25%;
}

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

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

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

دمتم سالمين.

المناقشة و النشر