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

فى البوست : ابدء 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 من النهارده ! متستناش ! اشتغل النهارده و هتاخد خبره و افكارك هتزيد فى استخدام كل خاصيه فيها , دور على فريمات , و شوف الناس بتكتب الكود ازاى , و اتعلم ! اكتر واكتر و متشبعش !

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

دمتم سالمين.

More Readings,

A tag cloud (word cloud, or weighted list in visual design) is a novelty visual representation of text data, typically used to depict keyword metadata (tags) on websites, or to visualize free form text. Tags are usually single words, and the importan...

Wizard of Oz prototyping. Wizard of Oz prototyping (WOZ prototyping) is a design methodology used in rapid product development to improve the user experience (UX). WOZ prototyping requires developers to create a rudimentary model of the completed pro...

Interaction personas focus instead on the touchpoints and the user’s mental state and the context in these specific moments, pinpointing crucial elements that could help to improve the product. It’s a very effective way to explore the possibil...

Through the Brief Book, Joseph McCormack tells us about the Elusive 600 and how to use it in the aim to present great ideas in little words. We have the mental capacity to comprehend 750 words a minute but most people speak at 150 words a minute. ...

This is used to document observable human activities and personal characteristics, interactions, time spent at fixed locations or in transit, and details of environmental context. A sketch map or architectural floor plan is used as the underla...

Scenarios describe the stories and context behind why a specific user or user group comes to your site.  They note the goals and questions to be achieved and sometimes define the possibilities of how the user(s) can achieve them on the site. A ...